Carregando…Carregando…Carregando…Carregando…Styled wrapper around the native <select> — better mobile picker and zero JS listbox overhead.
$ npx kikitocn add native-select@/lib/utilsimport { NativeSelect } from "@/components/ui/cn/native-select/NativeSelect";
export function NativeSelectExample() {
return (
<NativeSelect size="sm" variant="outline">
Native Select
</NativeSelect>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
options | (NativeSelectOptionData | NativeSelectGroupData)[] | undefined | Lista declarativa de opções/grupos — alternativa a compor via children |
children | React.ReactNode | undefined | Composição crua via <NativeSelectOption>/<NativeSelectOptGroup> (usar quando não passar `options`) |
value | string | undefined | Valor selecionado (controlled) |
defaultValue | string | undefined | Valor inicial (uncontrolled) |
onChange | (value: string) => void | undefined | Callback quando a seleção muda |
placeholder | string | undefined | Opção desabilitada/oculta exibida quando nada foi escolhido |
size | 'sm' | 'md' | 'lg' | 'md' | Tamanho do controle |
variant | 'outline' | 'filled' | 'ghost' | 'outline' | Estilo visual — mesmo vocabulário do Select |
state | 'default' | 'error' | 'success' | 'warning' | 'default' | Feedback visual de validação (cor da borda) |
disabled | boolean | false | Desabilita interação |
className | string | — | Classes CSS extras |
style | React.CSSProperties | — | Estilos inline extras |
com placeholder — controlled
grupos de opções
outline · filled · ghost
sm · md · lg
default · error · success · warning · disabled