Skip to main content

Select

Muestra una lista de opciones para que el usuario elija, activada por un botón.

default.tsx
1'use client';
2
3import { Select } from '@/components/ui/select';
4
5export function Default() {
6 return (
7 <div className="w-full max-w-xs">
8 <Select defaultValue="" aria-label="Select an option">
9 <option value="" disabled>
10 Select an option
11 </option>
12 <option value="1">Option 1</option>
13 <option value="2">Option 2</option>
14 <option value="3">Option 3</option>
15 </Select>
16 </div>
17 );
18}

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
5export function Default() {
6 return (
7 <div className="w-full max-w-xs">
8 <Select defaultValue="" aria-label="Select an option">
9 <option value="" disabled>
10 Select an option
11 </option>
12 <option value="1">Option 1</option>
13 <option value="2">Option 2</option>
14 <option value="3">Option 3</option>
15 </Select>
16 </div>
17 );
18}

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
5export function GroupedItems() {
6 return (
7 <div className="w-full max-w-xs">
8 <Select defaultValue="" aria-label="Select a fruit">
9 <option value="" disabled>
10 Select a fruit
11 </option>
12 <optgroup label="Citrus">
13 <option value="orange">Orange</option>
14 <option value="lemon">Lemon</option>
15 <option value="lime">Lime</option>
16 </optgroup>
17 <optgroup label="Berries">
18 <option value="strawberry">Strawberry</option>
19 <option value="blueberry">Blueberry</option>
20 <option value="raspberry">Raspberry</option>
21 </optgroup>
22 </Select>
23 </div>
24 );
25}

Referencia de API

Select

PropTipoPor defectoDescripción
wrapperClassNamestring-Clases CSS adicionales para el contenedor div
classNamestring-Clases CSS adicionales para el elemento select
disabledboolean-Deshabilita el menú desplegable