Switch

Darhol ta'sir qiladigan sozlamalar uchun yoqish/o'chirish tugmasi (role="switch").

BildirishnomalarAvtomatik saqlash

basic.tsx

'use client';

import { Switch } from '@akhatmirzo/ui';

export default function SwitchBasic() {
  return (
    <div className="flex flex-col gap-4">
      <Switch label="Bildirishnomalar" defaultChecked />
      <Switch label="Avtomatik saqlash" />
    </div>
  );
}

Import

import { Switch } from '@akhatmirzo/ui';

Qachon ishlatish

Sozlama darhol kuchga kirsa — bildirishnomalar, qorong'i mavzu, do'konni ochish/yopish. Foydalanuvchi "Saqlash" ni bosishi shart emas.
"Saqlash" tugmasi bor formalarda Checkbox ishlating — u yerda tanlov yuborilgandagina kuchga kiradi.
Label holatni emas, sozlamani aytsin: "Bildirishnomalar", "Yoqilgan/O'chirilgan" emas — holatni switch'ning o'zi ko'rsatadi.
O'zgarish vaqt talab qilsa (serverga so'rov), natijani toast bilan bildiring yoki xatoda qiymatni qaytaring.

O'lchamlar

sm — 32×18px, md (standart) — 40×24px. Tugmacha spring animatsiyasi bilan siljiydi.

Kichik · 32×18O'rta · 40×24

sizes.tsx

'use client';

import { Switch } from '@akhatmirzo/ui';

export default function SwitchSizes() {
  return (
    <div className="flex flex-wrap items-start gap-8">
      <Switch size="sm" label="Kichik · 32×18" defaultChecked />
      <Switch size="md" label="O'rta · 40×24" defaultChecked />
    </div>
  );
}

Izoh bilan

description label ostida chiqadi va aria-describedby orqali bog'lanadi.

Qorong'i mavzuTizim sozlamasidan qat'i nazarOvozli signalYangi buyurtma kelganda

description.tsx

'use client';

import { Switch } from '@akhatmirzo/ui';

export default function SwitchDescription() {
  return (
    <div className="flex max-w-sm flex-col gap-4">
      <Switch label="Qorong'i mavzu" description="Tizim sozlamasidan qat'i nazar" defaultChecked />
      <Switch size="sm" label="Ovozli signal" description="Yangi buyurtma kelganda" />
    </div>
  );
}

Boshqariladigan

checked va onCheckedChange — qiymat sizning holatingizda. Boshqarilmaydigan rejim uchun defaultChecked.

Do'kon ochiqBuyurtmalar qabul qilinmoqda

controlled.tsx

'use client';

import { Switch } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function SwitchControlled() {
  const [open, setOpen] = useState(true);

  return (
    <div className="flex flex-wrap items-center gap-4">
      <Switch label="Do'kon ochiq" checked={open} onCheckedChange={setOpen} />
      <span className="text-sm text-text-muted">
        {open ? 'Buyurtmalar qabul qilinmoqda' : "Buyurtmalar to'xtatilgan"}
      </span>
    </div>
  );
}

Holatlar

disabled — xira, bosilmaydi. invalid — trek atrofida qizil halqa, input'da aria-invalid.

O'chirilganO'chirilgan, yoqilganXato

states.tsx

'use client';

import { Switch } from '@akhatmirzo/ui';

export default function SwitchStates() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <Switch label="O'chirilgan" disabled />
      <Switch label="O'chirilgan, yoqilgan" disabled defaultChecked />
      <Switch label="Xato" invalid />
    </div>
  );
}

Field bilan

Field ning label'i switch'ga htmlFor orqali bog'lanadi, izoh esa aria-describedby ga tushadi — Switch ning o'z label i shart emas.

Ikki bosqichli tasdiqlash

Har kirishda SMS kod so'raladi

with-field.tsx

'use client';

import { Field, Switch } from '@akhatmirzo/ui';

export default function SwitchWithField() {
  return (
    <div className="max-w-sm">
      <Field label="Ikki bosqichli tasdiqlash" description="Har kirishda SMS kod so'raladi">
        <Switch />
      </Field>
    </div>
  );
}

Props

Switch qolgan barcha <input> atributlarini (name, value, form, onChange ...) qabul qiladi; ref ichki <input> ga tushadi. className esa ildiz <label> ga beriladi.

Prop	Tip	Standart	Tavsif
`checked`	`boolean`	—	Boshqariladigan qiymat
`defaultChecked`	`boolean`	`false`	Boshlang'ich qiymat (boshqarilmaydigan rejim)
`onCheckedChange`	`(checked: boolean) => void`	—	Foydalanuvchi almashtirganda
`label`	`ReactNode`	—	Switch yonidagi matn
`description`	`ReactNode`	—	Label ostidagi izoh
`size`	`'sm' \| 'md'`	`'md'`	O'lcham: 32×18 / 40×24px
`invalid`	`boolean`	—	Xato holati (Field ichida error bo'lsa avtomatik)
`disabled`	`boolean`	—	O'chirilgan holat
`className`	`string`	—	Ildiz <label> elementi klassi

Data atributlari

Ildiz <label> da: data-state (checked · unchecked), data-size (sm · md), data-disabled, data-invalid.

Accessibility

Native <input type="checkbox" role="switch"> — ekran o'quvchi "switch, yoqilgan" deb o'qiydi, Space bilan almashtiriladi, forma bilan yuboriladi.
Label bosilganda ham almashadi — butun komponent <label> ichida.
Bosish maydoni trekdan kattaroq — barmoq bilan oson tegiladi.
Fokus halqasi faqat klaviatura bilan kelganda chiqadi.
Label'siz switch uchun aria-label bering.

RadioGroup

Bir nechta variantdan bittasini tanlash: native radio'lar, strelkalar bilan yurish, card ko'rinishi.

Badge

Holat, kategoriya va filtr teglari uchun kichik yorliq: 6 rang, 3 variant, olib tashlash tugmasi.

Sahifada

Import Qachon ishlatish O'lchamlar Izoh bilan Boshqariladigan Holatlar Field bilan Props Data atributlari Accessibility

Switch

ImportBo'lim havolasini nusxalash

Qachon ishlatishBo'lim havolasini nusxalash

O'lchamlarBo'lim havolasini nusxalash

Izoh bilanBo'lim havolasini nusxalash

BoshqariladiganBo'lim havolasini nusxalash

HolatlarBo'lim havolasini nusxalash

Field bilanBo'lim havolasini nusxalash

PropsBo'lim havolasini nusxalash

Data atributlariBo'lim havolasini nusxalash

AccessibilityBo'lim havolasini nusxalash