AppSelect

Átomos

Campo de seleção com rótulo, texto de apoio e mensagem de erro, na mesma caixa do AppInput e com a seta arrow_drop_down. Usa o <select> nativo: teclado, leitores de tela e a lista do celular funcionam sem script.

Quando usar: escolher uma opção de uma lista média ou longa (estado, loja, categoria de produto).

Quando não usar: poucas opções sempre visíveis (use AppRadioGroup), várias escolhas (use AppCheckboxGroup) ou busca com digitação.

O ref e as props HTML são repassados ao <select>.

Importar

import { AppSelect } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppSelect.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppSelect.css';

Exemplos

Default

const Default = () => <AppSelect label="Estado" placeholder="Selecione">{ESTADOS.map(([value, name]) => (
      <option key={value} value={value}>
        {name}
      </option>
    ))}</AppSelect>;

Sizes

const Sizes = () => <div style={{ display: 'grid', gap: 16 }}>
    <AppSelect placeholder="Selecione" label="Pequeno (sm)" size="sm">{ESTADOS.map(([value, name]) => (
          <option key={value} value={value}>
            {name}
          </option>
        ))}</AppSelect>
    <AppSelect
        label="Médio (md)"
        size="md"
        defaultValue="sp"
        placeholder={undefined}>{ESTADOS.map(([value, name]) => (
          <option key={value} value={value}>
            {name}
          </option>
        ))}</AppSelect>
</div>;

With Hint

const WithHint = () => <AppSelect
    label="Estado"
    placeholder="Selecione"
    hint="Onde você comprou o produto.">{ESTADOS.map(([value, name]) => (
      <option key={value} value={value}>
        {name}
      </option>
    ))}</AppSelect>;

With Error

const WithError = () => <AppSelect
    label="Estado"
    placeholder="Selecione"
    error="Escolha o estado da compra.">{ESTADOS.map(([value, name]) => (
      <option key={value} value={value}>
        {name}
      </option>
    ))}</AppSelect>;

Disabled

const Disabled = () => <AppSelect label="Estado" placeholder="Selecione" disabled>{ESTADOS.map(([value, name]) => (
      <option key={value} value={value}>
        {name}
      </option>
    ))}</AppSelect>;

Props

Prop	Tipo	Padrão	Descrição
`children`*	`ReactNode`	`—`	As opções: elementos `<option>` (e `<optgroup>`).
`label`*	`string`	`—`	Rótulo visível do campo (obrigatório): vira o nome acessível via `<label htmlFor>`.
`error`	`string`	`—`	Mensagem de erro: troca o hint, pinta o campo de vermelho e marca `aria-invalid`.
`hint`	`string`	`—`	Texto de apoio abaixo do campo. Some enquanto houver `error`.
`placeholder`	`string`	`—`	Texto exibido enquanto nada foi escolhido (primeira opção, vazia e desabilitada, em cinza).
`size`	`"sm" \| "md"`	`—`	Altura do campo: `sm` (40px) ou `md` (44px). Padrão: `md`.