Select

El componente select se utiliza para permitir a los usuarios elegir una opción de una lista desplegable. Es ideal para campos que tienen un conjunto predefinido de opciones.

Properties

Además de las propiedades comunes, el componente select acepta las siguientes propiedades específicas:

Basic Properties

Property	Type	Required	Default	Description
`type`	`"select"`	Yes	-	Especifica el tipo como select
`options`	`Array<{ label: string; value: string; icon?: ReactNode }>`	Yes	-	Lista de opciones disponibles. Cada opción puede incluir un `icon` (ReactNode)
`schema`	`z.ZodType`	Yes	-	Esquema Zod para validación. Requerido
`value`	`string`	No	-	Valor inicial seleccionado

Diferencia con Otros Selectores

vs Combobox: Select no tiene búsqueda. Usa combobox si necesitas filtrar opciones.
vs Native Select: Select es custom (Radix UI) con más estilización. Usa native-select para máxima compatibilidad y menor peso.
vs Command: Select es un dropdown estándar. Usa command para el patrón de command palette.

Opciones con Iconos

Las opciones pueden incluir iconos para mejor identificación visual:

options: [
  { label: "Email", value: "email", icon: <Mail className="w-4 h-4" /> },
  { label: "Teléfono", value: "phone", icon: <Phone className="w-4 h-4" /> },
];

Examples

Basic Select

Un select básico con validación

import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const BasicSelect = createExampleForm({
  formId: "basic-select",
  fields: {
    country: {
      type: "select",
      label: "País",
      options: [
        { label: "España", value: "es" },
        { label: "México", value: "mx" },
        { label: "Colombia", value: "co" },
        { label: "Argentina", value: "ar" },
        { label: "Chile", value: "cl" },
      ],
      schema: z.string().min(1, "Por favor selecciona un país"),
      helperText: "Selecciona tu país de residencia",
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["country"],
    },
  },
});

Select con Iconos

Un select con iconos en las opciones

import { Briefcase, Building2, Globe, Home, MapPin } from "lucide-react";
import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const IconSelect = createExampleForm({
  formId: "icon-select",
  fields: {
    location: {
      type: "select",
      label: "Ubicación",
      options: [
        { label: "Global", value: "global", icon: <Globe /> },
        { label: "Ciudad", value: "city", icon: <MapPin /> },
        { label: "Oficina", value: "office", icon: <Building2 /> },
        { label: "Casa", value: "home", icon: <Home /> },
        { label: "Trabajo", value: "work", icon: <Briefcase /> },
      ],
      schema: z.string().min(1, "Por favor selecciona una ubicación"),
      helperText: "Selecciona tu ubicación preferida",
      icon: <MapPin />,
      iconProps: {
        className: "text-muted-foreground",
      },
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["location"],
    },
  },
});

Styled Select

Un select con estilos personalizados

import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const StyledSelect = createExampleForm({
  formId: "styled-select",
  fields: {
    theme: {
      type: "select",
      label: "Tema",
      options: [
        { label: "Claro", value: "light" },
        { label: "Oscuro", value: "dark" },
        { label: "Sistema", value: "system" },
      ],
      schema: z.string().min(1, "Por favor selecciona un tema"),
      helperText: "Elige tu tema preferido",
      input_className: "bg-muted/50 border-primary/20",
      label_className: "text-primary font-medium",
      helper_className: "text-muted-foreground/80",
      wrapper_className: "p-4 rounded-lg bg-muted/30",
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["theme"],
    },
  },
});

Best Practices

Proporciona opciones claras: Usa etiquetas descriptivas y concisas para las opciones
Agrupa opciones relacionadas: Usa iconos o categorías para agrupar opciones similares
Considera el orden: Ordena las opciones de manera lógica (alfabética, frecuencia de uso, etc.)
Implementa validación: Usa esquemas Zod para validar la selección
Añade texto de ayuda: Proporciona contexto adicional cuando sea necesario

Accessibility

El select es automáticamente asociado con su etiqueta
Los mensajes de error son anunciados correctamente a los lectores de pantalla
El componente sigue las mejores prácticas de ARIA
La navegación por teclado está completamente soportada
Los iconos son decorativos y no afectan la accesibilidad