Seletor

Isto é um <select> a sério, com o menu do próprio navegador — o que significa que funciona sem JavaScript, abre bem num telemóvel, e navega-se com o teclado sem precisar de nada desta biblioteca.

O select() é o controlo nu; o selectField() envolve-o numa etiqueta, texto de ajuda e mensagem de erro, tal como o textField() faz.

Seletor básico

As opções podem ser simples cadeias, e nesse caso o valor e a etiqueta são o mesmo.

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

Valores e etiquetas

Passa objetos quando o valor submetido é diferente do texto que a pessoa lê. O value marca a opção selecionada.

selectField({
  label: 'Saída',
  name: 'output',
  value: 'dist',
  options: [
    { value: 'dist', label: 'dist/ — a predefinição' },
    { value: 'build', label: 'build/' },
    { value: 'public', label: 'public/', disabled: true },
  ],
})

Texto indicativo

Um placeholder aparece como primeira opção desativada, selecionada quando não há value — por isso o campo começa vazio sem ser uma escolha válida.

selectField({
  label: 'Destino de publicação',
  name: 'target',
  placeholder: 'Escolhe um alojamento…',
  options: ['Netlify', 'Vercel', 'Cloudflare Pages', 'GitHub Pages'],
})

Grupos

Uma entrada com o seu próprio array options passa a ser um <optgroup>.

selectField({
  label: 'Extensão da 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'] },
  ],
})

Tamanhos

stack({ gap: 'md' },
  selectField({ label: 'Pequeno', name: 'sm', size: 'sm', options: ['Um', 'Dois'] }),
  selectField({ label: 'Médio', name: 'md', size: 'md', options: ['Um', 'Dois'] }),
  selectField({ label: 'Grande', name: 'lg', size: 'lg', options: ['Um', 'Dois'] }),
)

Ajuda, erro e desativado

Usado no atributo lang do html.
Escolhe uma framework para continuar.
stack({ gap: 'lg' },
  selectField({
    label: 'Idioma',
    name: 'locale',
    options: ['en', 'es', 'fr'],
    help: 'Usado no atributo lang do html.',
  }),
  selectField({
    label: 'Framework',
    name: 'framework',
    placeholder: 'Escolhe uma…',
    options: ['sitelo'],
    error: 'Escolhe uma framework para continuar.',
  }),
  selectField({
    label: 'Plano',
    name: 'plan',
    options: ['Grátis'],
    disabled: true,
  }),
)

A partir de dados

As opções são apenas um array, por isso costumam vir daquilo que o data() já carregou para a página.

return (() => {
  const posts = [
    { slug: 'hello-world', title: 'Olá mundo' },
    { slug: 'static-first', title: 'Estático primeiro' },
    { slug: 'no-runtime', title: 'Sem runtime' },
  ]

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

Props

PropTipoPredefiniçãoDescrição
optionsSelectOption[][]Cadeias, objetos { value, label, disabled }, ou { label, options } para um grupo.
valuestring | number—Que opção está selecionada.
placeholderstring—Primeira opção desativada, selecionada quando não há valor.
size'sm' | 'md' | 'lg''md'Altura do controlo e tamanho do texto.
namestring—Nome do campo; o id é derivado dele.
invalidbooleanfalseDefine aria-invalid. O selectField trata disso a partir do error.
disabledbooleanfalseDesativa o controlo.

O selectField() aceita ainda label, help, error, required e fieldClass — vê textField(). Os filhos são acrescentados depois das opções geradas, por isso podes escrever à mão as que precisares.