Negocios

Native Select

Select nativo do HTML com estilização do design system. Mais simples que o Select shadcn — use quando a lista é curta e não precisa de busca.

Visão geral

O NativeSelect usa o select nativo do browser, garantindo comportamento padrão em mobile e desktop.

Demo

Import

import { NativeSelect } from "@/components/native-select"

Quando usar

Use NativeSelect para listas curtas (até 10 itens) em formulários simples. Use o componente Select shadcn para listas com grupos, ícones ou busca.

Padrão de implementação

Snippets para uso do NativeSelect.

NativeSelect com Field

import { NativeSelect } from "@/components/native-select"
import { Field } from "@/components/field"

<Field label="Categoria" htmlFor="cat">
  <NativeSelect id="cat" placeholder="Selecionar categoria" defaultValue="">
    <option value="tech">Tecnologia</option>
    <option value="design">Design</option>
    <option value="marketing">Marketing</option>
  </NativeSelect>
</Field>

Com optgroup

<NativeSelect>
  <optgroup label="América">
    <option value="br">Brasil</option>
    <option value="ar">Argentina</option>
  </optgroup>
  <optgroup label="Europa">
    <option value="pt">Portugal</option>
    <option value="es">Espanha</option>
  </optgroup>
</NativeSelect>

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter