Switch

Değiştiği anda uygulanan ayarlar için 34×20'lik bir açık/kapalı anahtarı. Bir checkbox değil, <button role="switch">'tir.

KararlıKaynak kod

Koyu tema

<Switch defaultChecked>Koyu tema</Switch>

Import

tsx

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

Örnekler

Controlled

defaultChecked state'i switch'in içinde tutar. Controlled kullanım için checked ve bir sonraki boolean değeri alan onCheckedChange ver.

Taslakları otomatik kaydetchecked: false

const [on, setOn] = useState(false);

<Switch checked={on} onCheckedChange={setOn}>
Taslakları otomatik kaydet
</Switch>

Etiket konumu

Etiket baştaEtiket sonda

<Switch labelPosition="start">Etiket başta</Switch>
<Switch labelPosition="end">Etiket sonda</Switch>

Devre dışı ve etiketsiz

Children vermiyorsan switch'e bir aria-label ver.

Devre dışı, kapalıDevre dışı, açık

<Switch disabled>Devre dışı, kapalı</Switch>
<Switch disabled defaultChecked>Devre dışı, açık</Switch>
<Switch aria-label="Bildirimler" />

Form içinde

Bir buton kendi başına değer göndermez. name verirsen switch gizli bir input render'lar; bu input switch açıkken value değerini gönderir (varsayılanı "on"). Kapalıyken hiçbir şey gönderilmez.

<form>
<Switch name="newsletter" value="yes" defaultChecked>
  Bültene abone ol
</Switch>
</form>

API referansı

Ref ve kalan buton attribute'ları track <button>'ına gider; className dıştaki sarmalayıcıya gider.

Prop	Tip	Varsayılan	Açıklama
`checked`	`boolean`	–	Açık state'i (controlled).
`defaultChecked`	`boolean`	`false`	Başlangıçtaki açık state'i (uncontrolled).
`onCheckedChange`	`(checked: boolean) => void`	–	Değiştirildiğinde yeni state ile çağrılır.
`children`	`ReactNode`	–	Görünür etiket; erişilebilir ad olur. Yoksa aria-label ver.
`labelPosition`	`"start" \| "end"`	`"end"`	Etiketin hangi tarafta duracağı.
`name`	`string`	–	Verildiğinde bu adla gizli bir input, switch açıkken value'yu gönderir.
`value`	`string`	`"on"`	Açıkken gönderilen değer.
`disabled`	`boolean`	–	Switch'i devre dışı bırakır ve etiketi soluklaştırır. Bir `Field` içindeyse ondan devralınır.
`invalid`	`boolean`	–	Geçersiz stilini (`data-invalid`) ve `aria-invalid`'i zorlar. Bir `Field` içindeyse onun `error`'ından türetilir.

Stil verme

Seçici	Değerler
`.mrd-switch`	Sarmalayıcı; `className` buraya gelir
`.mrd-switch__track`	<button role="switch"> elemanı
`.mrd-switch__thumb`	Hareket eden topuz
`.mrd-switch__label`	Görünür etiket
`data-state`	`on` · `off` (sarmalayıcı ve track)
`data-label-position`	`start` · `end`
`data-disabled`	Devre dışıyken sarmalayıcıda
`data-invalid`	Geçersizken track'te; danger halkasını çizer

Switch'in component değişkeni yok; kapalı track --mrd-control-off, açık track --mrd-accent kullanır.

Erişilebilirlik

aria-checked ile birlikte role="switch" olarak sunulur, ekran okuyucular “açık” / “kapalı” diye okur.
Görünür etiket aria-labelledby ile bağlanır; etikete tıklamak da switch'i değiştirir.
Bir Field içinde switch, Field'ın id'sini alır (böylece adını Field etiketinden alır); aria-describedby, aria-invalid ve disabled değerlerini de ondan alır.
Geçersizlik anlamını aria-invalid taşır; stili data-invalid belirler.

Tuş	Ne yapar
`Tab`	Focus'u switch'e taşır.
`Space`	Switch'i açar ya da kapatır.
`Enter`	Switch'i açar ya da kapatır.

Kullanım ilkeleri

Yap

Switch'i anında uygulanan ayarlar için kullan ve ayarın adıyla etiketle: “Koyu tema”.

Kaçın

Kaydet butonu gerektiren bir formda switch kullanmak; orada Checkbox kullan.

Yap

Etiketi sabit tut; state'i switch'in kendisi gösterir.

Kaçın

Etiketi “Açık” ve “Kapalı” arasında değiştirmek; state'i tekrarlar ve ekran okuyucu kullanıcılarının kafasını karıştırır.

İlgili sayfalar

Checkbox: gönderimde uygulanan seçimler.
SegmentedControl: adlandırılmış modlar arasında seçim.