Visão geral

O Select é mais rico que o NativeSelect — suporta grupos, ícones e customização visual completa.

Demo

Framework

Tamanho

Import

import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "@/components/ui/select"

Padrão de implementação

Snippets para uso do Select.

Select controlado

"use client"
import { useState } from "react"

export function SelectDemo() {
  const [value, setValue] = useState("")

  return (
    <Select value={value} onValueChange={setValue}>
      <SelectTrigger>
        <SelectValue placeholder="Selecionar..." />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="opcao1">Opção 1</SelectItem>
        <SelectItem value="opcao2">Opção 2</SelectItem>
      </SelectContent>
    </Select>
  )
}

Com grupos

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Selecionar país" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>América do Sul</SelectLabel>
      <SelectItem value="br">Brasil</SelectItem>
      <SelectItem value="ar">Argentina</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Europa</SelectLabel>
      <SelectItem value="pt">Portugal</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

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