CheckboxGroup

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

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

CheckboxGroup bir <fieldset> çizer; label başlık (<legend>) olur. Değer, işaretli öğelerin value listesidir.

Grup etiketi

Birden çok seçenek seçebilirsiniz.

Birinci seçenek

İkinci seçenek

Üçüncü seçenek

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

export default function Default() {
  return (
    <CheckboxGroup label="Grup etiketi" description="Birden çok seçenek seçebilirsiniz." defaultValue={['one']}>
      <Checkbox value="one" label="Birinci seçenek" />
      <Checkbox value="two" label="İkinci seçenek" />
      <Checkbox value="three" label="Üçüncü seçenek" />
    </CheckboxGroup>
  );
}

Üst onay kutusu

allValues ve parent taşıyan bir Checkbox tüm öğeleri işaretler ya da temizler; bir kısmı işaretliyken karışık görünür.

Grup etiketi

Tümü

Birinci seçenek

İkinci seçenek

Üçüncü seçenek

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

export default function ParentCheckbox() {
  const [value, setValue] = useState<string[]>(['one']);
  return (
    <CheckboxGroup label="Grup etiketi" value={value} onValueChange={setValue} allValues={['one', 'two', 'three']}>
      <Checkbox parent label="Tümü" />
      <div className="flex flex-col gap-sm ps-xl">
        <Checkbox value="one" label="Birinci seçenek" />
        <Checkbox value="two" label="İkinci seçenek" />
        <Checkbox value="three" label="Üçüncü seçenek" />
      </div>
    </CheckboxGroup>
  );
}

Yatay

orientation="horizontal" iki üç kısa seçeneği sarmalanan bir satıra dizer.

Grup etiketi

Birinci seçenek

İkinci seçenek

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

export default function Horizontal() {
  return (
    <CheckboxGroup label="Grup etiketi" orientation="horizontal">
      <Checkbox value="one" label="Birinci seçenek" />
      <Checkbox value="two" label="İkinci seçenek" />
    </CheckboxGroup>
  );
}

Geçersiz

error mesajı grubun altında görünür ve gruba bağlanır. Öğelere invalid vererek kutuları da işaretleyin.

Grup etiketi

Birinci seçenek

İkinci seçenek

En az bir seçenek seçin.

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

export default function Invalid() {
  return (
    <>
      <CheckboxGroup label="Grup etiketi" required error="En az bir seçenek seçin.">
        <Checkbox value="one" label="Birinci seçenek" invalid />
        <Checkbox value="two" label="İkinci seçenek" invalid />
      </CheckboxGroup>
    </>
  );
}

Açık ve koyu mod

Grup renk eklemez; öğeler Checkbox token’larını kullanır.

Grup etiketi

Birinci seçenek

İkinci seçenek

En az bir seçenek seçin.

Grup etiketi

Birinci seçenek

İkinci seçenek

En az bir seçenek seçin.

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

export default function Invalid() {
  return (
    <>
      <CheckboxGroup label="Grup etiketi" required error="En az bir seçenek seçin.">
        <Checkbox value="one" label="Birinci seçenek" invalid />
        <Checkbox value="two" label="İkinci seçenek" invalid />
      </CheckboxGroup>
    </>
  );
}