Select

Elegir de listas. Estilo personalizado. Simplificar opciones.

default.tsx

1'use client';
2
3import { Select } from '@/components/ui/select';
4
5const options = [
6  { value: '1', label: 'Option 1' },
7  { value: '2', label: 'Option 2' },
8  { value: '3', label: 'Option 3' },
9];
10
11export function Default() {
12  return (
13    <div className="w-full max-w-xs">
14      <Select defaultValue="" aria-label="Select an option">
15        <option value="" disabled>
16          Select an option
17        </option>
18        {options.map((option) => (
19          <option key={option.value} value={option.value}>
20            {option.label}
21          </option>
22        ))}
23      </Select>
24    </div>
25  );
26}

Instalación

pnpm dlx nachui add select

Anatomía

1import { Select } from '@/components/ui/select';

1<Select>
2  <option value="1">Option 1</option>
3</Select>

Variantes

Predeterminado (Default)

default.tsx

1'use client';
2
3import { Select } from '@/components/ui/select';
4
5const options = [
6  { value: '1', label: 'Option 1' },
7  { value: '2', label: 'Option 2' },
8  { value: '3', label: 'Option 3' },
9];
10
11export function Default() {
12  return (
13    <div className="w-full max-w-xs">
14      <Select defaultValue="" aria-label="Select an option">
15        <option value="" disabled>
16          Select an option
17        </option>
18        {options.map((option) => (
19          <option key={option.value} value={option.value}>
20            {option.label}
21          </option>
22        ))}
23      </Select>
24    </div>
25  );
26}

Opciones Agrupadas (Grouped Items)

Utiliza la etiqueta optgroup para agrupar opciones relacionadas lógicamente.

grouped-items.tsx

1'use client';
2
3import { Select } from '@/components/ui/select';
4
5const groups = [
6  {
7    label: 'Citrus',
8    options: [
9      { value: 'orange', label: 'Orange' },
10      { value: 'lemon', label: 'Lemon' },
11      { value: 'lime', label: 'Lime' },
12    ],
13  },
14  {
15    label: 'Berries',
16    options: [
17      { value: 'strawberry', label: 'Strawberry' },
18      { value: 'blueberry', label: 'Blueberry' },
19      { value: 'raspberry', label: 'Raspberry' },
20    ],
21  },
22] as const;
23
24export function GroupedItems() {
25  return (
26    <div className="w-full max-w-xs">
27      <Select defaultValue="" aria-label="Select a fruit">
28        <option value="" disabled>
29          Select a fruit
30        </option>
31        {groups.map((group) => (
32          <optgroup key={group.label} label={group.label}>
33            {group.options.map((opt) => (
34              <option key={opt.value} value={opt.value}>
35                {opt.label}
36              </option>
37            ))}
38          </optgroup>
39        ))}
40      </Select>
41    </div>
42  );
43}

Referencia de API

Select

Prop	Tipo	Por defecto	Descripción
`wrapperClassName`	`string`	-	Clases CSS adicionales para el contenedor `div`
`className`	`string`	-	Clases CSS adicionales para el elemento `select`
`disabled`	`boolean`	-	Deshabilita el menú desplegable

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorRadio

SiguienteSeparator