Checkbox

'use client';

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

export default function CheckboxBasic() {
  return (
    <div className="flex flex-col gap-3">
      <Checkbox label="Shartlarga roziman" />
      <Checkbox label="Meni eslab qol" defaultChecked />
      <Checkbox label="Qisman tanlangan" checked="indeterminate" />
    </div>
  );
}

'use client';

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

export default function CheckboxSizes() {
  return (
    <div className="flex flex-wrap items-start gap-6">
      <Checkbox size="sm" label="Kichik · 16" defaultChecked />
      <Checkbox size="md" label="O'rta · 20" defaultChecked />
    </div>
  );
}

'use client';

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

export default function CheckboxDescription() {
  return (
    <div className="flex max-w-sm flex-col gap-4">
      <Checkbox
        label="Yangiliklar"
        description="Haftasiga bir marta yangi imkoniyatlar haqida xat"
        defaultChecked
      />
      <Checkbox
        size="sm"
        label="Qurilmani eslab qolish"
        description="30 kun davomida qayta kod so'ralmaydi"
      />
    </div>
  );
}

'use client';

import { Checkbox, type CheckedState } from '@akhatmirzo/ui';
import { useState } from 'react';

const channels = ['Email', 'SMS', 'Telegram'];

export default function CheckboxSelectAll() {
  const [selected, setSelected] = useState<string[]>(['Email']);
  const all: CheckedState =
    selected.length === channels.length ? true : selected.length > 0 ? 'indeterminate' : false;

  return (
    <div className="flex flex-col gap-3">
      <Checkbox
        label="Barcha kanallar"
        checked={all}
        onCheckedChange={(checked) => setSelected(checked ? channels : [])}
      />
      <div className="flex flex-col gap-3 pl-7">
        {channels.map((channel) => (
          <Checkbox
            key={channel}
            label={channel}
            checked={selected.includes(channel)}
            onCheckedChange={(checked) =>
              setSelected((s) => (checked ? [...s, channel] : s.filter((c) => c !== channel)))
            }
          />
        ))}
      </div>
    </div>
  );
}

'use client';

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

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

'use client';

import { Checkbox, Field } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function CheckboxWithField() {
  const [agree, setAgree] = useState(false);

  return (
    <div className="max-w-sm">
      <Field
        label="Foydalanish shartlari"
        required
        error={agree ? undefined : 'Davom etish uchun rozilik kerak'}
      >
        <Checkbox label="Shartlar bilan tanishdim" checked={agree} onCheckedChange={setAgree} />
      </Field>
    </div>
  );
}