Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    CheckboxGroup

    Gathers related checkboxes under one legend and shares their list of values.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { CheckboxGroup } from '@bigbang/ui';
    Source
    CheckboxGroup.tsx
    Storybook
    CheckboxGroup · Playground

    CheckboxGroup is in the @bigbang/ui package; its items are Checkboxes.

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

    <CheckboxGroup label="Group label" value={value} onValueChange={setValue}>
      <Checkbox value="one" label="First option" />
      <Checkbox value="two" label="Second option" />
    </CheckboxGroup>;

    Props

    Section titled “Props”
    labelRequired
    Description
    The question or topic of the group, rendered as the <legend> that names it.
    Type
    string
    description
    Description
    Help text under the legend, linked to the group with aria-describedby.
    Type
    ReactNode
    error
    Description
    When set, the group is invalid and the message is linked to the group after the description.
    Type
    string
    required
    Description
    At least one item must be checked: the legend gets * with a visually hidden "zorunlu" or "required".
    Type
    boolean
    Default
    false
    necessityIndicator
    Description
    Which fields the form marks: 'required' marks required groups, 'optional' adds "(isteğe bağlı)" or "(optional)" to the others.
    Type
    'required' | 'optional'
    Default
    'required'
    value
    Description
    Values of the checked items when you control them. Use it with onValueChange.
    Type
    string[]
    defaultValue
    Description
    Values of the checked items on first render when you do not control them.
    Type
    string[]
    Default
    []
    onValueChange
    Description
    Called with the values of the checked items after each change.
    Type
    (value: string[]) => void
    allValues
    Description
    Every item value; needed only when one Checkbox has parent and checks or clears them all.
    Type
    string[]
    orientation
    Description
    Items under each other, or in a wrapping row for two or three short options.
    Type
    'vertical' | 'horizontal'
    Default
    'vertical'
    disabled
    Description
    Turns off every item.
    Type
    boolean
    Default
    false
    className
    Description
    For layout only: margins and placement.
    Type
    string
    childrenRequired
    Description
    Checkbox components, each with a value.
    Type
    ReactNode

    Data attributes

    Section titled “Data attributes”
    • data-component="checkbox-group": on the root <fieldset>.
    • data-part: legend, description, items, error.
    • data-invalid: when error is set.