Selector

Esto es un <select> de verdad con el desplegable propio del navegador, lo que significa que funciona sin JavaScript, se abre bien en un móvil y se navega con el teclado sin necesitar nada de esta biblioteca.

select() es el control pelado; selectField() lo envuelve en etiqueta, texto de ayuda y mensaje de error, igual que hace textField().

Selector básico

Las opciones pueden ser cadenas simples, en cuyo caso el valor y la etiqueta coinciden.

Tema

selectField({
  label: 'Tema',
  name: 'theme',
  options: ['Claro', 'Oscuro', 'Sistema'],
})

Valores y etiquetas

Pasa objetos cuando el valor que se envía difiere del texto que lee una persona. value marca la opción seleccionada.

Salida

selectField({
  label: 'Salida',
  name: 'output',
  value: 'dist',
  options: [
    { value: 'dist', label: 'dist/ — el valor por defecto' },
    { value: 'build', label: 'build/' },
    { value: 'public', label: 'public/', disabled: true },
  ],
})

Marcador de posición

Un placeholder se dibuja como una primera opción deshabilitada, seleccionada cuando no hay value, así el campo empieza vacío sin ser una elección válida.

Destino del despliegue

selectField({
  label: 'Destino del despliegue',
  name: 'target',
  placeholder: 'Elige un hosting…',
  options: ['Netlify', 'Vercel', 'Cloudflare Pages', 'GitHub Pages'],
})

Grupos

Una entrada con su propio array options se convierte en un <optgroup>.

Extensión de página

selectField({
  label: 'Extensión de página',
  name: 'ext',
  value: '.ht.js',
  options: [
    { label: 'JavaScript', options: ['.ht.js', '.html.js'] },
    { label: 'TypeScript', options: ['.ht.ts', '.html.ts'] },
    { label: 'JSX', options: ['.ht.jsx', '.ht.tsx'] },
  ],
})

Tamaños

Pequeño

Mediano

Grande

stack({ gap: 'md' },
  selectField({ label: 'Pequeño', name: 'sm', size: 'sm', options: ['Uno', 'Dos'] }),
  selectField({ label: 'Mediano', name: 'md', size: 'md', options: ['Uno', 'Dos'] }),
  selectField({ label: 'Grande', name: 'lg', size: 'lg', options: ['Uno', 'Dos'] }),
)

Ayuda, error y deshabilitado

Idioma

Se usa para el atributo lang del html.

Framework

Elige un framework para continuar.

Plan

stack({ gap: 'lg' },
  selectField({
    label: 'Idioma',
    name: 'locale',
    options: ['en', 'es', 'fr'],
    help: 'Se usa para el atributo lang del html.',
  }),
  selectField({
    label: 'Framework',
    name: 'framework',
    placeholder: 'Elige uno…',
    options: ['sitelo'],
    error: 'Elige un framework para continuar.',
  }),
  selectField({
    label: 'Plan',
    name: 'plan',
    options: ['Gratis'],
    disabled: true,
  }),
)

Desde datos

Las opciones no son más que un array, así que normalmente vienen de lo que data() ya cargó para la página.

Entrada destacada

return (() => {
  const posts = [
    { slug: 'hello-world', title: 'Hola mundo' },
    { slug: 'static-first', title: 'Primero lo estático' },
    { slug: 'no-runtime', title: 'Sin runtime' },
  ]

  return selectField({
    label: 'Entrada destacada',
    name: 'featured',
    value: 'static-first',
    options: posts.map((post) => ({ value: post.slug, label: post.title })),
  })
})()

Props

Prop	Tipo	Por defecto	Descripción
`options`	`SelectOption[]`	`[]`	Cadenas, objetos { value, label, disabled }, o { label, options } para un grupo.
`value`	`string \| number`	—	Qué opción está seleccionada.
`placeholder`	`string`	—	Primera opción deshabilitada, seleccionada cuando no hay valor.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Altura del control y tamaño del texto.
`name`	`string`	—	Nombre del campo; el id se deriva de él.
`invalid`	`boolean`	`false`	Pone aria-invalid. selectField lo hace por ti a partir de error.
`disabled`	`boolean`	`false`	Deshabilita el control.

selectField() admite además label, help, error, required y fieldClass — mira textField(). Los hijos se añaden después de las opciones generadas, así que puedes escribir a mano las que necesites.