Ir para o conteúdo
uiify

Framework

Next.jsTanStack StartAstroVike

Estilo

CSSTailwind

Tema

Idioma

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

Input Group

A labeled native input with an optional prefix, suffix, or related action.

Navegadores
Chrome 123+Firefox 121+Safari 17.5+
Nível
0
Limite de layout forçado
0 ms
Limite do axe
0
Compatível com SSR
Sim
Contrato publicado
Ambiente de teste

Experimentar

Input Group

https://

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

Exemplos

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>
  );
}

API

InputGroup

PropTipoPadrãoDescrição
childrenReactNode—Native controls and optional start/end addons.
className / style / ref / native div propsnative div props—Native wrapper props, styles, events, and ref are forwarded.
renderReactElement | ((props, state) => ReactElement)—Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

InputGroupAddon

PropTipoPadrãoDescrição
align*"start" | "end"—Places the addon at the logical inline start or end.
childrenReactNode—Addon content; it does not label the input.
renderReactElement | ((props, state) => ReactElement)—Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

Teclado

TeclaAção

Acessibilidade

A layout wrapper around consumer-owned native children. Label the input independently; addons are not labels, and actions remain native links or buttons. The wrapper adds no focus, validation, or client behavior.

Pontos de integração de estilos

data-uiify-input-groupdata-part="root|addon"data-align
Esta página foi traduzida automaticamente e ainda não foi revisada.