Checkbox

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Checkbox kutu ile etiketi tek tıklama alanında toplar; etikete tıklamak da kutuyu değiştirir.

Seçenek etiketi

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

export default function Default() {
  return <Checkbox label="Seçenek etiketi" />;
}

Durumlar

İşaretsiz, işaretli, karışık (indeterminate), geçersiz ve devre dışı.

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

export default function States() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Checkbox label="Seçenek etiketi" />
      <Checkbox label="Seçenek etiketi" defaultChecked />
      <Checkbox label="Seçenek etiketi" indeterminate />
      <Checkbox label="Seçenek etiketi" invalid />
      <Checkbox label="Seçenek etiketi" disabled />
      <Checkbox label="Seçenek etiketi" disabled defaultChecked />
    </div>
  );
}

Açıklamalı

description etiketin altında durur ve kutuya aria-describedby ile bağlanır; adın parçası olmaz.

Seçenek etiketiSeçenek açıklaması burada yer alır.

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

export default function WithDescription() {
  return <Checkbox label="Seçenek etiketi" description="Seçenek açıklaması burada yer alır." defaultChecked />;
}

Kontrollü

checked ve onCheckedChange ile durumu siz tutarsınız.

Seçenek etiketi

false

import { Checkbox } from '@bigbang/ui';
import { useState } from 'react';

export default function Controlled() {
  const [checked, setChecked] = useState(false);
  return (
    <div className="flex items-center gap-md">
      <Checkbox label="Seçenek etiketi" checked={checked} onCheckedChange={setChecked} />
      <code className="type-body-sm text-fg-subtle">{String(checked)}</code>
    </div>
  );
}

Açık ve koyu mod

İşaretli kutu color-action-primary-default dolgu alır.

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

export default function States() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Checkbox label="Seçenek etiketi" />
      <Checkbox label="Seçenek etiketi" defaultChecked />
      <Checkbox label="Seçenek etiketi" indeterminate />
      <Checkbox label="Seçenek etiketi" invalid />
      <Checkbox label="Seçenek etiketi" disabled />
      <Checkbox label="Seçenek etiketi" disabled defaultChecked />
    </div>
  );
}