Bidang teks

Ada dua lapisan di sini. input() dan textarea() adalah kendali telanjangnya; textField() dan textareaField() membungkus salah satunya dalam label, teks bantuan, dan pesan galat, lalu menyambungkannya dengan for dan aria-describedby. Raih yang kedua kecuali Anda membangun tata letaknya sendiri.

Bidang teks dasar

Nama

textField({ label: 'Nama', name: 'name', placeholder: 'Ada Lovelace' })

Teks bantuan

Teks bantuan disambungkan dengan aria-describedby, jadi pembaca layar membacanya sebagai bagian dari bidangnya alih-alih sebagai teks lepas sesudahnya.

Kami hanya memakainya untuk mengirim kabar build yang gagal.

textField({
  label: 'Email',
  name: 'email',
  type: 'email',
  help: 'Kami hanya memakainya untuk mengirim kabar build yang gagal.',
})

Wajib dan galat

Sebuah error menandai bidangnya tidak sah, mewarnai batasnya, menyetel aria-invalid, dan mengarahkan aria-describedby ke pesannya — satu props, keempatnya sekaligus.

Proyek

Situs

Itu bukan sebuah URL.

stack({ gap: 'lg' },
  textField({ label: 'Proyek', name: 'project', required: true, value: '' }),
  textField({
    label: 'Situs',
    name: 'site',
    error: 'Itu bukan sebuah URL.',
    value: 'sitelo titik dev',
  }),
)

Ukuran

Kecil

Sedang

Besar

stack({ gap: 'md' },
  textField({ label: 'Kecil', name: 'small', size: 'sm', placeholder: 'sm' }),
  textField({ label: 'Sedang', name: 'medium', size: 'md', placeholder: 'md' }),
  textField({ label: 'Besar', name: 'large', size: 'lg', placeholder: 'lg' }),
)

Hiasan

Awalan atau akhiran yang menempel pada kendalinya sendiri, untuk satuan dan potongan nilai yang tetap.

Situs

https://

Tenggat build

detik

stack({ gap: 'md' },
  textField({ label: 'Situs', name: 'url', startAdornment: 'https://', placeholder: 'example.com' }),
  textField({ label: 'Tenggat build', name: 'timeout', endAdornment: 'detik', value: '30' }),
)

Dinonaktifkan dan hanya-baca

Nonaktif

Hanya baca

stack({ gap: 'md' },
  textField({ label: 'Nonaktif', name: 'disabled', value: 'Tidak bisa disunting', disabled: true }),
  textField({ label: 'Hanya baca', name: 'readonly', value: 'dist/', readonly: true }),
)

Banyak baris

textareaField() adalah bidang yang sama di sekeliling sebuah <textarea>. Nilainya adalah isi elemen alih-alih sebuah atribut, dan komponennya menangani itu untuk Anda.

Deskripsi

Ditampilkan di hasil pencarian dan kartu sosial.

textareaField({
  label: 'Deskripsi',
  name: 'description',
  rows: 4,
  help: 'Ditampilkan di hasil pencarian dan kartu sosial.',
  value: 'Pembuatan situs statis tanpa konfigurasi yang ditenagai Vite.',
})

Di dalam formulir

Nama

Pesan

card(
  cardBody(
    stack({ gap: 'md' },
      textField({ label: 'Nama', name: 'contact-name', required: true }),
      textField({ label: 'Email', name: 'contact-email', type: 'email', required: true }),
      textareaField({ label: 'Pesan', name: 'message', rows: 3 }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ variant: 'ghost', color: 'neutral' }, 'Batal'),
    button({ type: 'submit' }, 'Kirim'),
  ),
)

Membangunnya sendiri

field() adalah pembungkusnya sendiri — ia menerima kendali apa pun sebagai anak, jadi Anda bisa menaruh dua masukan dalam satu baris, atau sebuah kendali yang tidak dimiliki pustaka ini, di bawah perlakuan label dan galat yang sama.

Satu label tidak bisa menamai dua kendali, jadi di sini tiap masukan butuh namanya sendiri yang dapat diakses. Itulah yang dilakukan aria-label: label yang terlihat menamai pasangannya, dan tiap masukan menyatakan ia ujung yang mana.

Rentang tanggal

Kedua ujungnya termasuk.

field({ label: 'Rentang tanggal', help: 'Kedua ujungnya termasuk.' },
  stack({ direction: 'row', gap: 'sm' },
    input({ type: 'date', name: 'from', 'aria-label': 'Dari' }),
    input({ type: 'date', name: 'to', 'aria-label': 'Sampai' }),
  ),
)

Props

textField dan textareaField

Prop	Tipe	Bawaan	Deskripsi
`label`	`Child`	—	Label bidangnya. Juga menurunkan id kendalinya ketika tidak ada name.
`name`	`string`	—	Nama bidang formulir; id-nya diturunkan darinya.
`help`	`Child`	—	Petunjuk di bawah kendalinya, disambungkan dengan aria-describedby.
`error`	`Child \| false`	—	Pesan galat. Juga menyetel aria-invalid pada kendalinya.
`required`	`boolean`	`false`	Menandai label dan kendalinya.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tinggi kendali dan ukuran teksnya.
`type`	`string`	`'text'`	Tipe masukan apa pun. Hanya textField.
`startAdornment`	`Child`	—	Awalan yang menempel pada kendalinya. Hanya textField.
`endAdornment`	`Child`	—	Akhiran yang menempel pada kendalinya. Hanya textField.
`value`	`string \| number`	—	Nilai awal.
`fieldClass`	`string`	—	Kelas untuk pembungkusnya, bukan kendalinya.

Id diturunkan dari name — atau dari label ketika tidak ada name — alih-alih dari sebuah pencacah, jadi halaman yang sama merender HTML yang sama pada setiap build. Berikan id untuk menimpanya.

field

Prop	Tipe	Bawaan	Deskripsi
`label`	`Child`	—	Teks labelnya.
`help`	`Child`	—	Petunjuk di bawah kendalinya.
`error`	`Child \| false`	—	Pesan galat; juga menambahkan keadaan tidak sah ke pembungkusnya.
`required`	`boolean`	`false`	Menambahkan penanda wajib ke labelnya.
`for`	`string`	—	Id kendali yang sedang diberi label.