Checkbox

18px kutulu native bir checkbox. Birbirinden bağımsız evet/hayır seçimleri ve bir listeden birden fazla öğe seçmek için kullanılır. Her <input type="checkbox"> gibi formla birlikte gönderilir.

<Checkbox defaultChecked>Ürün güncellemelerini e-postayla gönder</Checkbox>

Import

import { Checkbox } from "@merid/react";

Örnekler

Açıklamalı

description, etiketin altına ikinci bir satır render'lar ve onu aria-describedby ile bağlar.

<Checkbox description="Faturalar, makbuzlar ve plan değişiklikleri dahil.">
Faturalandırma bildirimleri
</Checkbox>

Controlled

Uncontrolled checkbox'lar defaultChecked kullanır. Controlled kullanmak için checked ver ve onChange içinde event.target.checked değerini oku.

const [checked, setChecked] = useState(false);

<Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)}>
Koşulları kabul ediyorum
</Checkbox>

Belirsiz (indeterminate)

indeterminate, karışık “–” state'ini gösterir; genellikle kısmen seçili bir üst öğede kullanılır. DOM'daki indeterminate özelliğini ayarlar; yardımcı teknolojiler bunu aria-checked="mixed" olarak bildirir.

const all = selected.length === items.length;
const some = selected.length > 0 && !all;

<Checkbox checked={all} indeterminate={some} onChange={() => setSelected(all ? [] : items)}>
Tüm ekipler
</Checkbox>

Devre dışı ve geçersiz

<Checkbox disabled>Devre dışı</Checkbox>
<Checkbox disabled defaultChecked>Devre dışı ve işaretli</Checkbox>
<Checkbox invalid required>Veri işleme sözleşmesini kabul et</Checkbox>

Görünür etiket olmadan

Children vermeden aria-label ver; örneğin bir tablonun seçim kolonunda.

<Checkbox aria-label="Satırı seç" />

API referansı

Ref ve native input attribute'ları (checked, defaultChecked, onChange, name, value, …) <input>'a gider. className ve style dıştaki sarmalayıcıya gider.

Stil verme

Geçersiz halkasını input üzerindeki data-invalid belirler; anlamı aria-invalid taşır. Checkbox'ın component değişkeni yoktur; --mrd-accent, --mrd-line-strong ve --mrd-danger token'larını kullanır.

Erişilebilirlik

• Native bir checkbox'tır: işaretli state, devre dışı state ve form gönderimi platformdan gelir.
• Etiket gerçek bir <label htmlFor> olduğu için metne tıklamak kutuyu değiştirir.
• Bir Field içinde checkbox'ı Field'ın etiketi adlandırır (aria-labelledby). Children yine tıklanabilir bir etiket olarak render'lanır ama açıklama olarak bağlanır (aria-describedby); böylece kontrol hiçbir zaman iki kez etiketlenmez.
• İlişkili checkbox'ları legend'lı bir fieldset içinde ya da role="group" ve aria-labelledby taşıyan bir kapsayıcıda grupla.

Kullanım ilkeleri

İlgili sayfalar

• Switch: hemen etkili olan açık/kapalı ayarlar.
• Radio: bir kümeden tek seçim.
• Table: checkbox'larla satır seçimi.