Pilihan

Ini adalah <select> sungguhan dengan tarik-turun milik peramban sendiri — artinya ia bekerja tanpa JavaScript, membuka dengan benar di ponsel, dan bisa dinavigasi papan ketik tanpa apa pun dari pustaka ini.

select() adalah kendali telanjangnya; selectField() membungkusnya dalam label, teks bantuan, dan pesan galat, dengan cara yang sama seperti textField().

Pilihan dasar

Opsinya bisa berupa string biasa; dalam hal itu nilainya dan labelnya sama.

Tema

selectField({
  label: 'Tema',
  name: 'theme',
  options: ['Terang', 'Gelap', 'Sistem'],
})

Nilai dan label

Berikan objek ketika nilai yang dikirim berbeda dari teks yang dibaca orang. value menandai opsi yang terpilih.

Keluaran

selectField({
  label: 'Keluaran',
  name: 'output',
  value: 'dist',
  options: [
    { value: 'dist', label: 'dist/ — bawaannya' },
    { value: 'build', label: 'build/' },
    { value: 'public', label: 'public/', disabled: true },
  ],
})

Placeholder

Placeholder dirender sebagai opsi pertama yang dinonaktifkan, terpilih ketika value tidak ada — jadi bidangnya mulai kosong tanpa menjadi pilihan yang sah.

Target penerapan

selectField({
  label: 'Target penerapan',
  name: 'target',
  placeholder: 'Pilih sebuah hosting…',
  options: ['Netlify', 'Vercel', 'Cloudflare Pages', 'GitHub Pages'],
})

Grup

Entri dengan larik options-nya sendiri menjadi sebuah <optgroup>.

Ekstensi halaman

selectField({
  label: 'Ekstensi halaman',
  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'] },
  ],
})

Ukuran

Kecil

Sedang

Besar

stack({ gap: 'md' },
  selectField({ label: 'Kecil', name: 'sm', size: 'sm', options: ['Satu', 'Dua'] }),
  selectField({ label: 'Sedang', name: 'md', size: 'md', options: ['Satu', 'Dua'] }),
  selectField({ label: 'Besar', name: 'lg', size: 'lg', options: ['Satu', 'Dua'] }),
)

Bantuan, galat, dan nonaktif

Lokal

Dipakai untuk atribut lang pada html.

Framework

Pilih sebuah framework untuk melanjutkan.

Paket

stack({ gap: 'lg' },
  selectField({
    label: 'Lokal',
    name: 'locale',
    options: ['en', 'es', 'fr'],
    help: 'Dipakai untuk atribut lang pada html.',
  }),
  selectField({
    label: 'Framework',
    name: 'framework',
    placeholder: 'Pilih satu…',
    options: ['sitelo'],
    error: 'Pilih sebuah framework untuk melanjutkan.',
  }),
  selectField({
    label: 'Paket',
    name: 'plan',
    options: ['Gratis'],
    disabled: true,
  }),
)

Dari data

Opsinya hanyalah sebuah larik, jadi biasanya ia datang dari apa pun yang sudah dimuat data() untuk halamannya.

Pos unggulan

return (() => {
  const posts = [
    { slug: 'hello-world', title: 'Halo dunia' },
    { slug: 'static-first', title: 'Statis dulu' },
    { slug: 'no-runtime', title: 'Tanpa runtime' },
  ]

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

Props

Prop	Tipe	Bawaan	Deskripsi
`options`	`SelectOption[]`	`[]`	String, objek { value, label, disabled }, atau { label, options } untuk sebuah grup.
`value`	`string \| number`	—	Opsi mana yang terpilih.
`placeholder`	`string`	—	Opsi pertama yang dinonaktifkan, terpilih ketika tidak ada nilai.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tinggi kendali dan ukuran teksnya.
`name`	`string`	—	Nama bidang formulir; id-nya diturunkan darinya.
`invalid`	`boolean`	`false`	Menyetel aria-invalid. selectField menyetelnya untuk Anda dari error.
`disabled`	`boolean`	`false`	Menonaktifkan kendalinya.

selectField() tambahan menerima label, help, error, required, dan fieldClass — lihat textField(). Anaknya ditambahkan setelah opsi hasil generasi, jadi Anda bisa menulis sendiri opsi apa pun yang dibutuhkan.