Skip to content
My Docs

Native Select

El componente Native Select utiliza el elemento <select> nativo del navegador, estilizado para que se vea consistente con el resto de componentes. Es la opción más ligera y compatible, ideal para casos donde necesitas el comportamiento nativo del navegador.

Diferencia con Select y Combobox

Section titled “Diferencia con Select y Combobox”
CaracterísticaNative SelectSelectCombobox
Renderizado<select> nativoCustom (Radix UI)Custom (Radix UI + Command)
Búsqueda❌ No❌ No✅ Sí
Peso⚡ Muy ligero🟡 Medio🔴 Más pesado
Compatibilidad✅ 100% navegadores✅ Modernos✅ Modernos
EstilizaciónLimitada (nativo)CompletaCompleta
Iconos en opciones❌ No✅ Sí✅ Sí
Accesibilidad✅ Nativa✅ ARIA✅ ARIA

Properties

Section titled “Properties”

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

Basic Properties

Section titled “Basic Properties”
PropertyTypeRequiredDefaultDescription
type"native-select"Yes-Especifica el tipo como native-select
optionsArray<{ label: string; value: string }>Yes-Lista de opciones disponibles. Nota: No soporta iconos en opciones (limitación del select nativo)
placeholderstringNo-Texto de la opción placeholder (primera opción con value="")
valuestringNo-Valor inicial seleccionado

Examples

Section titled “Examples”

Basic Native Select

Section titled “Basic Native Select”
Un native select básico con validación
basic-native-select.tsx
import { createExampleForm } from "../createExampleForm";
import { z } from "zod";


export const BasicNativeSelect = createExampleForm({
  formId: "basic-native-select",
  fields: {
    country: {
      type: "native-select",
      label: "País",
      placeholder: "Selecciona un 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"],
    },
  },
});

Cuándo usar Native Select

Section titled “Cuándo usar Native Select”

  • Usa Native Select cuando:

    • Necesitas máxima compatibilidad con navegadores antiguos
    • Quieres el menor peso posible (performance crítico)
    • No necesitas iconos en las opciones
    • Prefieres el comportamiento nativo del navegador
    • Tienes listas cortas (< 10 opciones)

  • Usa Select cuando:

    • Necesitas iconos en las opciones
    • Quieres estilización completa y consistente
    • Necesitas más control sobre el renderizado
    • Tienes listas medianas (10-50 opciones)

  • Usa Combobox cuando:

    • Tienes listas largas (> 10 opciones)
    • Necesitas búsqueda/filtrado
    • Quieres la mejor UX para listas extensas

Limitaciones del Native Select

Section titled “Limitaciones del Native Select”
  1. No soporta iconos: Las opciones no pueden tener iconos (limitación del <select> nativo)
  2. Estilización limitada: El estilo está limitado por las capacidades del navegador
  3. Sin búsqueda: No hay capacidad de búsqueda/filtrado nativa
  4. Comportamiento del navegador: El dropdown se renderiza por el navegador, no puedes controlar su posición completamente

Ventajas del Native Select

Section titled “Ventajas del Native Select”
  1. Muy ligero: No carga librerías adicionales de UI
  2. 100% compatible: Funciona en todos los navegadores, incluso muy antiguos
  3. Accesibilidad nativa: El navegador maneja automáticamente la accesibilidad
  4. Rápido: Renderizado nativo, sin JavaScript adicional
  5. Familiar: Los usuarios conocen el comportamiento nativo

Best Practices

Section titled “Best Practices”
  1. Usa para listas cortas: Ideal para menos de 10 opciones
  2. Etiquetas claras: Asegúrate de que las etiquetas sean autoexplicativas
  3. Orden lógico: Ordena las opciones de manera que tenga sentido
  4. Placeholder útil: Usa el placeholder para guiar al usuario
  5. Implementa validación: Usa esquemas Zod para validar la selección

Accessibility

Section titled “Accessibility”
  • El native select es automáticamente asociado con su etiqueta
  • Los mensajes de error son anunciados correctamente a los lectores de pantalla
  • El componente utiliza la accesibilidad nativa del navegador
  • La navegación por teclado está completamente soportada (nativa)
  • Funciona perfectamente con lectores de pantalla sin configuración adicional

Next Steps

Section titled “Next Steps”