Select

Select muestra una lista de opciones bajo un trigger: región, comuna, horario. En mobile la lista sube como sheet para elegir con el pulgar.

Revisión técnica · JTRX-12

¿Dónde te visitamos?

Anatomía

Un trigger con la misma forma y alto que Input. Al tocarlo abre la lista de opciones: en desktop bajo el campo y en mobile como sheet desde abajo, con el title de SelectContent arriba.

  1. Trigger
  2. Valor o placeholder
  3. Chevron

Tamaños

smFiltros y tablas densas.
defaultFormularios y pasos del checkout.
lgHeroes y flujos mobile.

Estados

VacíoEl placeholder dice qué elegir.
Con valorLa opción elegida reemplaza al placeholder.
Con errorField muestra el mensaje bajo el trigger.
CargandoUn spinner reemplaza al chevron mientras llegan las opciones.
DeshabilitadoDepende de otro campo que aún no tiene valor.
Con LabelDentro de Field, como el resto del formulario.

Select o Combobox

Combobox suma un buscador sobre la lista. Úsalo para modelos, marcas o comunas de todo Chile, donde recorrer opciones una a una es lento.

SelectListas cortas que se recorren de un vistazo.
ComboboxListas largas donde el usuario ya sabe qué busca.

Uso

Sí
Un Label que dice qué dato se está eligiendo.
No
Sin Label, una vez elegido el valor se pierde el contexto.
Sí
Tres o más opciones que no caben a la vista.
No
Esconder dos opciones en un menú. Usa SegmentedControl o RadioGroup.

Código

import { Field } from '@carvuk/design-system/components/field';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@carvuk/design-system/components/select';

<Field label='Comuna' error={errors.comuna}>
  <Select value={comuna} onValueChange={setComuna}>
    <SelectTrigger>
      <SelectValue placeholder='Elige tu comuna' />
    </SelectTrigger>
    <SelectContent title='Comuna'>
      <SelectItem value='providencia'>Providencia</SelectItem>
    </SelectContent>
  </Select>
</Field>