Select

Select é um <select> nativo estilizado, não um combobox APG. Use-o em uma lista conhecida que continue administrável sem filtro e deixe o seletor, teclado e convenções da plataforma por conta do navegador.

Exemplos

Rótulo, dica e opções nativas

Use uma opção vazia desabilitada quando uma escolha for obrigatória. O rótulo nomeia a decisão depois que o seletor fecha; uma primeira opção parecida com placeholder não o substitui.

Team sizeUsed to tailor your workspace.

Tamanhos e erro

Select compartilha os tokens de altura dos campos. error substitui hint e acrescenta aria-invalid, mantendo uma única mensagem ligada ao controle em vez de empilhar retornos.

Compact status

Billing countryChoose the billing country.

Quando usar

Use Select para uma escolha em uma lista curta e estável em que o seletor nativo seja suficiente.

Prefira outro componente quando:

A lista precisa de filtro ou detalhes ricos nas opções — use Combobox, que oferece uma listbox pesquisável.
Poucas escolhas devem continuar visíveis e uma precisa estar selecionada — use Radio para comparar sem abrir o seletor.
Várias escolhas podem ser verdadeiras — use Checkbox, em vez de sobrecarregar um controle de escolha única.

Acessibilidade

Renderiza um <select> nativo com filhos <option> ou <optgroup> nativos; teclado e seletor do navegador se aplicam.
Um label fornecido usa htmlFor com um id gerado ou passado pelo consumidor. Sem label, ofereça nome acessível.
hint ou error é conectado por aria-describedby; error tem precedência e define aria-invalid.
O foco usa --shadow-focus. Não documente atalhos de listbox personalizados: este não é um combobox customizado.

API e código

Nome	Tipo	Obrigatória	Descrição
`label`	`string`	—	Label rendered above the select and associated through `htmlFor`.
`hint`	`string`	—	Helper text rendered below the select. Replaced by `error` when provided.
`error`	`string`	—	Error message that enables error styling and `aria-invalid`.
`size`	`'sm' \| 'md' \| 'lg'`	—	Control height. Default `"md"`.
`children`	`ReactNode`	Obrigatória	Native `<option>` or `<optgroup>` children.

Coloque o select nativo no wrapper para a seta CSS ficar sobre o controle sem receber cliques:

html

<div class="lyra-field">
  <label class="lyra-label" for="team-size">Tamanho do time</label>
  <span class="lyra-select-wrap">
    <select class="lyra-input" id="team-size">
      <option value="">Escolha uma faixa</option>
      <option value="1-10">1–10 pessoas</option>
      <option value="11-50">11–50 pessoas</option>
    </select>
  </span>
  <span class="lyra-hint">Usado para personalizar seu workspace.</span>
</div>

<div class="lyra-field">
  <label class="lyra-label" for="country">País de cobrança</label>
  <span class="lyra-select-wrap">
    <select class="lyra-input lyra-input--error" id="country" aria-invalid="true"></select>
  </span>
  <span class="lyra-hint lyra-hint--error">Escolha o país de cobrança.</span>
</div>

<lyra:select> Gerado do lyra-ds/blade v0.10.0.

Prop	Padrão	Obrigatória	Valores de exemplo
`label`	`null`	—	—
`hint`	`null`	—	—
`error`	`null`	—	`Invalid`
`size`	`'md'`	—	`lg` `sm`

blade

<lyra:select name="timezone" label="Time zone" hint="Used for every scheduled report." size="md">
    <option value="america-sao_paulo">America/Sao_Paulo</option>
    <option value="europe-lisbon">Europe/Lisbon</option>
</lyra:select>