NativeSelect
O <select> nativo do navegador com o visual do Midas. Ideal para formulários simples e mobile (abre o seletor do sistema). Tamanhos default e sm.
Exemplos
Interaja com o componente e copie o código de cada exemplo.
Básico
import { NativeSelect } from "@t2-educacao/midas";Uso
<NativeSelect aria-label="Estado" defaultValue="sp">
<option value="sp">São Paulo</option>
<option value="rj">Rio de Janeiro</option>
<option value="mg">Minas Gerais</option>
</NativeSelect>Props
Aceita todas as props de <select> mais:
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
size | "default" | "sm" | "default" | 32px ou 28px de altura |
Exemplos
Com grupos
<NativeSelect aria-label="Certificação">
<optgroup label="Bancárias">
<option value="cpa">CPA</option>
<option value="cpro-r">CPRO-R</option>
</optgroup>
</NativeSelect>Acessibilidade
- É o
<select>do navegador: teclado e leitores de tela funcionam nativamente.
Kbd
Exibe teclas e atalhos de teclado (ex.: Ctrl + K). Kbd para uma tecla, KbdGroup para um atalho com várias teclas.
Pagination
Navegação entre páginas: Pagination, PaginationContent, PaginationItem, PaginationLink (página atual em outline), PaginationPrevious, PaginationNext e PaginationEllipsis, mais o helper getPageRange para calcular as páginas com reticências.