Select

Selector de opciones con grupos, búsqueda y validación.

pnpm dlx nuvo-ui add select

Básico

Rol

Con grupos

País

País de facturación.

Con error

Estado

Este campo es obligatorio.

Multiselect con checkbox

Roles

Marca uno o varios roles.

Uso

import { MultiSelect, Select } from "@nuvo-ui/ui"

<Select
  label="País"
  value={country}
  onValueChange={setCountry}
  groups={[
    { label: "América", options: [{ value: "mx", label: "México" }] },
    { label: "Europa",  options: [{ value: "es", label: "España"  }] },
  ]}
/>

<MultiSelect
  label="Roles"
  value={roles}
  onValueChange={setRoles}
  selectAllLabel="Seleccionar todo"
  options={[
    { value: "admin",  label: "Administrador" },
    { value: "editor", label: "Editor" },
    { value: "viewer", label: "Visor", disabled: true },
  ]}
/>

Props

Select

Prop	Tipo	Default	Descripción
options	SelectOption[]	[]	Opciones planas: { value, label, disabled? }
groups	SelectGroup[]	[]	Grupos con label: { label?, options[] }
value	string	—	Valor controlado
defaultValue	string	—	Valor inicial
onValueChange	(v: string) => void	—	Callback al cambiar
placeholder	string	"Seleccionar..."	Texto cuando no hay selección
errorMessage	string	—	Mensaje de error
helperText	string	—	Texto de ayuda
disabled	boolean	false	Deshabilita el select

MultiSelect

Prop	Tipo	Default	Descripción
options	SelectOption[]	[]	Opciones con checkbox
value	string[]	[]	Valores seleccionados
defaultValue	string[]	[]	Valores iniciales
onValueChange	(v: string[]) => void	—	Callback al cambiar selección
selectAllLabel	string	"Seleccionar todo"	Texto del control de seleccionar todo
placeholder	string	"Seleccionar..."	Texto cuando no hay selección
errorMessage	string	—	Mensaje de error
helperText	string	—	Texto de ayuda
disabled	boolean	false	Deshabilita el multiselect