CheckboxGroup

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

CheckboxGroup.tsx

Storybook

CheckboxGroup · Playground

CheckboxGroup, @bigbang/ui paketindedir; öğeleri Checkbox’tır.

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

<CheckboxGroup label="Grup etiketi" value={value} onValueChange={setValue}>
  <Checkbox value="one" label="Birinci seçenek" />
  <Checkbox value="two" label="İkinci seçenek" />
</CheckboxGroup>;

Özellikler

labelZorunlu

Açıklama

Grubun sorusu ya da konusu; grubu adlandıran <legend> olarak çizilir.

Tür

string

description

Açıklama

Başlığın altındaki yardım metni; gruba aria-describedby ile bağlanır.

Tür

ReactNode

error

Açıklama

Verildiğinde grup geçersiz olur ve mesaj yardım metninden sonra gruba bağlanır.

Tür

string

required

Açıklama

En az bir öğe işaretlenmelidir: başlığa * ve görünmeyen "zorunlu" ya da "required" eklenir.

Tür

boolean

Varsayılan

false

necessityIndicator

Açıklama

Formun hangi alanları işaretlediği: required zorunlu grupları, optional diğerlerini "(isteğe bağlı)" ya da "(optional)" ile işaretler.

Tür

'required' | 'optional'

Varsayılan

'required'

value

Açıklama

Kontrollü kullanımda işaretli öğelerin değerleri. onValueChange ile birlikte verin.

Tür

string[]

defaultValue

Açıklama

Kontrolsüz kullanımda ilk çizimde işaretli öğelerin değerleri.

Tür

string[]

Varsayılan

[]

onValueChange

Açıklama

Her değişiklikten sonra işaretli öğelerin değerleriyle çağrılır.

Tür

(value: string[]) => void

allValues

Açıklama

Tüm öğe değerleri; yalnızca bir Checkbox parent taşıyıp hepsini işaretliyor ya da temizliyorsa gerekir.

Tür

string[]

orientation

Açıklama

Öğeler alt alta ya da iki üç kısa seçenek için sarmalanan bir satırda.

Tür

'vertical' | 'horizontal'

Varsayılan

'vertical'

disabled

Açıklama

Tüm öğeleri devre dışı bırakır.

Tür

boolean

Varsayılan

false

className

Açıklama

Yalnızca yerleşim için: dış boşluk ve konum.

Tür

string

childrenZorunlu

Açıklama

Her biri value taşıyan Checkbox bileşenleri.

Tür

ReactNode

Veri öznitelikleri

• data-component="checkbox-group": kök <fieldset> üzerinde.
• data-part: legend, description, items, error.
• data-invalid: error verildiğinde.