⟦Škíp tó çóñtéñt~~~~~~⟧
uiify

⟦Fráméwórk~~~~⟧

⟦Ñéxt.jš~~~⟧⟦TáñŠtáçk Štárt~~~~~⟧⟦Áštró~~⟧⟦Víké~~⟧

⟦Štýlé~~⟧

⟦ÇŠŠ~~⟧⟦Táílwíñd~~~⟧

⟦Thémé~~⟧

⟦Láñgúágé~~~⟧

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)Pseudo (accented)Pseudo (bidi)

Input Group

⟦Á lábéléd ñátívé íñpút wíth áñ óptíóñál préfíx, šúffíx, ór rélátéd áçtíóñ.~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

⟦Brówšérš~~~⟧
Chrome 123+Firefox 121+Safari 17.5+
⟦Tíér~~⟧
0
⟦Fórçéd láýóút búdgét~~~~~~~⟧
0 ms
⟦Áxé búdgét~~~~⟧
0
⟦ŠŠR çómpátíblé~~~~~⟧
⟦Ýéš~~⟧
⟦Públíšhéd çóñtráçt~~~~~~~⟧
⟦Téšt hárñéšš~~~~~⟧

⟦Pláýgróúñd~~~~⟧

Input Group

https://

Enter a domain. Add https:// when using the value.

⟦Éxámpléš~~~⟧

Currency and units

Use passive affixes for context and keep a visible label on the input. The amount is in US dollars.

$USD

Amount in US dollars.

import { Input, InputGroup, InputGroupAddon } from "@gunkin/uiify";

export default function Example() {
  return (
    <div className="example-field">
      <label htmlFor="input-group-amount">Price</label>
      <InputGroup>
        <InputGroupAddon align="start">$</InputGroupAddon>
        <Input id="input-group-amount" name="price" inputMode="decimal" defaultValue="25.00" aria-describedby="input-group-amount-help" />
        <InputGroupAddon align="end">USD</InputGroupAddon>
      </InputGroup>
      <p className="example-description" id="input-group-amount-help">Amount in US dollars.</p>
    </div>
  );
}

Invalid and disabled fields

Describe server errors below the input. A disabled input does not disable a related Configure link.

https://

Enter a valid domain.

Configure
import { Button, Input, InputGroup, InputGroupAddon } from "@gunkin/uiify";

export default function Example() {
  return (
    <div className="example-form">
      <div className="example-field">
        <label htmlFor="input-group-states-website">Website</label>
        <InputGroup>
          <InputGroupAddon align="start">https://</InputGroupAddon>
          <Input id="input-group-states-website" name="website" invalid defaultValue="not a domain" aria-describedby="input-group-states-error" />
        </InputGroup>
        <p className="example-error" id="input-group-states-error">Enter a valid domain.</p>
      </div>
      <div className="example-field">
        <label htmlFor="input-group-states-endpoint">Endpoint</label>
        <InputGroup>
          <Input id="input-group-states-endpoint" name="endpoint" disabled defaultValue="api.uiify.dev" />
          <InputGroupAddon align="end"><Button as="a" href="/docs/installation" size="sm" variant="ghost">Configure</Button></InputGroupAddon>
        </InputGroup>
      </div>
    </div>
  );
}

⟦ÁPÍ~~⟧

InputGroup

⟦Próp~~⟧⟦Týpé~~⟧⟦Défáúlt~~~⟧⟦Déšçríptíóñ~~~~⟧
childrenReactNode—⟦Ñátívé çóñtrólš áñd óptíóñál štárt/éñd áddóñš.~~~~~~~~~~~~~~~~~⟧
className / style / ref / native div propsnative div props—⟦Ñátívé wráppér própš, štýléš, évéñtš, áñd réf áré fórwárdéd.~~~~~~~~~~~~~~~~~~~~~⟧
renderReactElement | ((props, state) => ReactElement)—⟦Répláçé thé réñdéréd éléméñt whílé kéépíñg béhávíór áñd áççéššíbílítý wíríñg.~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

InputGroupAddon

⟦Próp~~⟧⟦Týpé~~⟧⟦Défáúlt~~~⟧⟦Déšçríptíóñ~~~~⟧
align*"start" | "end"—⟦Pláçéš thé áddóñ át thé lógíçál íñlíñé štárt ór éñd.~~~~~~~~~~~~~~~~~~~⟧
childrenReactNode—⟦Áddóñ çóñtéñt; ít dóéš ñót lábél thé íñpút.~~~~~~~~~~~~~~~~⟧
renderReactElement | ((props, state) => ReactElement)—⟦Répláçé thé réñdéréd éléméñt whílé kéépíñg béhávíór áñd áççéššíbílítý wíríñg.~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

⟦Kéýbóárd~~~⟧

⟦Kéý~~⟧⟦Áçtíóñ~~~⟧

⟦Áççéššíbílítý~~~~~⟧

⟦Á láýóút wráppér áróúñd çóñšúmér-ówñéd ñátívé çhíldréñ. Lábél thé íñpút íñdépéñdéñtlý; áddóñš áré ñót lábélš, áñd áçtíóñš rémáíñ ñátívé líñkš ór búttóñš. Thé wráppér áddš ñó fóçúš, válídátíóñ, ór çlíéñt béhávíór.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

⟦Štýlíñg hóókš~~~~~⟧

data-uiify-input-groupdata-part="root|addon"data-align