Componentes
Select
Campo nativo. Mesmo anel e a mesma altura do Input, com a seta Graffiti do campo. O menu aberto é o do sistema.
estávelEntradadesde 0.1.0@hiboupay/react
Exemplos#
Escolha um método para continuar.
Select nativo vestido de campo
Importar#
tsx
import { Select } from "@hiboupay/react";
import type { SelectProps } from "@hiboupay/react";Quando usar#
Use quando
- Escolher um valor de lista curta dentro de formulário.
- Quando o picker nativo do celular é desejável.
Não use quando
- Filtro em barra: FilterChip.
- Mais de ~15 opções com busca: FilterChip searchable.
Anatomia#
- 01Label
- 02Campo com seta à direita
- 03Mensagem: dica ou erro
Estados#
defaulthoverfocuserrordisabled
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | string | Rótulo visível. | |
| hint | string | Dica abaixo. | |
| error | string | Erro; liga aria-invalid. | |
| size | "sm" | "md" | "lg" | "md" | 32 · 40 · 48. |
| children* | <option> | <optgroup> | Opções nativas. |
Acessibilidade#
Teclado
EspaçoAlt+↓Abre as opções.
↑ ↓Troca a opção.
Leitor de tela
- —Combobox nativo, anunciado pelo sistema.
Boas práticas#
Faça
- Opção padrão sensata ou placeholder desabilitado.
Evite
- Select para duas opções: use Tabs segment.
Conteúdo#
- —Opções em ordem lógica (fluxo), não alfabética, quando houver fluxo.
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Entrada
Input
Papel com anel fino. Foco vira azul com halo de 4px. Erro diz o que fazer, com ícone e aria.
Entrada
FilterChip
Chip de filtro: rótulo + valor, popover de vidro. Ativo vira papel com anel azul e ganha X para limpar.
Entrada
Radio
Uma entre poucas. Círculo da mesma família do FilterChip single. fieldset + legend em rótulo de máquina.