Metin alanı

Burada iki katman var. input() ve textarea() çıplak denetimlerdir; textField() ve textareaField() bunlardan birini bir etiket, yardım metni ve hata iletisiyle sarar ve onları for ile aria-describedby aracılığıyla bağlar. Yerleşimi kendiniz kurmuyorsanız ikincisine uzanın.

Temel metin alanı

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

Yardım metni

Yardım metni aria-describedby ile bağlanır, böylece bir ekran okuyucu onu alanın ardındaki başıboş metin olarak değil, alanın bir parçası olarak okur.

E-posta

Yalnızca derleme hatalarını göndermek için kullanıyoruz.

textField({
  label: 'E-posta',
  name: 'email',
  type: 'email',
  help: 'Yalnızca derleme hatalarını göndermek için kullanıyoruz.',
})

Zorunlu ve hata

Bir error alanı geçersiz işaretler, kenarlığı renklendirir, aria-invalid ayarlar ve aria-describedby değerini iletiye yöneltir — tek prop, dördü birden.

Proje

Site

Bu bir URL değil.

stack({ gap: 'lg' },
  textField({ label: 'Proje', name: 'project', required: true, value: '' }),
  textField({
    label: 'Site',
    name: 'site',
    error: 'Bu bir URL değil.',
    value: 'sitelo nokta dev',
  }),
)

Boyutlar

Küçük

Orta

Büyük

stack({ gap: 'md' },
  textField({ label: 'Küçük', name: 'small', size: 'sm', placeholder: 'sm' }),
  textField({ label: 'Orta', name: 'medium', size: 'md', placeholder: 'md' }),
  textField({ label: 'Büyük', name: 'large', size: 'lg', placeholder: 'lg' }),
)

Süslemeler

Birimler ve bir değerin sabit parçaları için denetimin kendisine iliştirilmiş bir önek ya da sonek.

Site

https://

Derleme zaman aşımı

saniye

stack({ gap: 'md' },
  textField({ label: 'Site', name: 'url', startAdornment: 'https://', placeholder: 'example.com' }),
  textField({ label: 'Derleme zaman aşımı', name: 'timeout', endAdornment: 'saniye', value: '30' }),
)

Devre dışı ve salt okunur

Devre dışı

Salt okunur

stack({ gap: 'md' },
  textField({ label: 'Devre dışı', name: 'disabled', value: 'Düzenlenemez', disabled: true }),
  textField({ label: 'Salt okunur', name: 'readonly', value: 'dist/', readonly: true }),
)

Çok satırlı

textareaField() bir <textarea> çevresindeki aynı alandır. Değeri bir öznitelik değil öğe içeriğidir; bunu bileşen sizin için halleder.

Açıklama

Arama sonuçlarında ve sosyal kartlarda gösterilir.

textareaField({
  label: 'Açıklama',
  name: 'description',
  rows: 4,
  help: 'Arama sonuçlarında ve sosyal kartlarda gösterilir.',
  value: 'Vite ile çalışan, yapılandırma gerektirmeyen statik site üretimi.',
})

Bir formda

E-posta

İleti

card(
  cardBody(
    stack({ gap: 'md' },
      textField({ label: 'Ad', name: 'contact-name', required: true }),
      textField({ label: 'E-posta', name: 'contact-email', type: 'email', required: true }),
      textareaField({ label: 'İleti', name: 'message', rows: 3 }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ variant: 'ghost', color: 'neutral' }, 'Vazgeç'),
    button({ type: 'submit' }, 'Gönder'),
  ),
)

Kendiniz kurmak

field() tek başına sarmalayıcıdır — çocuk olarak her tür denetimi alır, böylece bir satıra iki girdi ya da bu kitaplıkta bulunmayan bir denetimi aynı etiket ve hata davranışının altına koyabilirsiniz.

Tek bir etiket iki denetimi adlandıramaz, bu yüzden burada her girdinin kendi erişilebilir adına ihtiyacı vardır. aria-label değerlerinin yaptığı budur: görünür etiket çifti adlandırır, her girdi ise hangi uç olduğunu söyler.

Tarih aralığı

İki uç da dahildir.

field({ label: 'Tarih aralığı', help: 'İki uç da dahildir.' },
  stack({ direction: 'row', gap: 'sm' },
    input({ type: 'date', name: 'from', 'aria-label': 'Başlangıç' }),
    input({ type: 'date', name: 'to', 'aria-label': 'Bitiş' }),
  ),
)

Proplar

textField ve textareaField

Prop	Tür	Varsayılan	Açıklama
`label`	`Child`	—	Alan etiketi. Ad yokken denetim kimliğini de türetir.
`name`	`string`	—	Form alanı adı; kimlik ondan türetilir.
`help`	`Child`	—	Denetimin altındaki ipucu, aria-describedby ile bağlanır.
`error`	`Child \| false`	—	Hata iletisi. Denetimde aria-invalid da ayarlar.
`required`	`boolean`	`false`	Etiketi ve denetimi işaretler.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Denetim yüksekliği ve metin boyutu.
`type`	`string`	`'text'`	Herhangi bir girdi türü. Yalnızca textField.
`startAdornment`	`Child`	—	Denetime iliştirilmiş önek. Yalnızca textField.
`endAdornment`	`Child`	—	Denetime iliştirilmiş sonek. Yalnızca textField.
`value`	`string \| number`	—	Başlangıç değeri.
`fieldClass`	`string`	—	Denetim yerine sarmalayıcı için sınıf.

Kimlikler bir sayaçtan değil name değerinden — ya da ad yokken label değerinden — türetilir, böylece aynı sayfa her derlemede aynı HTML’i işler. Geçersiz kılmak için id geçirin.

field

Prop	Tür	Varsayılan	Açıklama
`label`	`Child`	—	Etiket metni.
`help`	`Child`	—	Denetimin altındaki ipucu.
`error`	`Child \| false`	—	Hata iletisi; sarmalayıcıya geçersiz durumunu da ekler.
`required`	`boolean`	`false`	Etikete zorunlu işaretini ekler.
`for`	`string`	—	Etiketlenen denetimin kimliği.