Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    ToggleGroup

    A set of Toggles that share one value, with one tab stop and arrow keys between items.

    Storybook
    Storybook
    Source
    Source

    Installation

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

    ToggleGroup is in the @bigbang/ui package; its items are Toggles.

    import { Toggle, ToggleGroup } from '@bigbang/ui';
    

    <ToggleGroup label="Text alignment" value={value} onValueChange={setValue}>
      <Toggle value="left" icon="align-left" label="Align left" />
      <Toggle value="center" icon="align-center" label="Centre" />
    </ToggleGroup>;

    Props

    Section titled “Props”
    labelRequired
    Description
    Name of the group for screen readers, such as "Metin hizası". Required: the items alone do not say what they set.
    Type
    string
    value
    Description
    Values of the pressed items when you control them. Use it with onValueChange.
    Type
    string[]
    defaultValue
    Description
    Values of the pressed items on first render when you do not control them.
    Type
    string[]
    Default
    []
    onValueChange
    Description
    Called with the values of the pressed items after each change.
    Type
    (value: string[]) => void
    multiple
    Description
    Lets more than one item stay pressed, as in bold, italic and underline. Without it pressing an item releases the others, as in text alignment.
    Type
    boolean
    Default
    false
    orientation
    Description
    Direction of the items and of the arrow keys that move focus between them.
    Type
    'horizontal' | 'vertical'
    Default
    'horizontal'
    variant
    Description
    Look of every item; an item's own variant wins.
    Type
    'tertiary' | 'secondary'
    Default
    'tertiary'
    size
    Description
    Size of every item; an item's own size wins.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    disabled
    Description
    Turns off every item.
    Type
    boolean
    Default
    false
    className
    Description
    For layout only: margins and placement.
    Type
    string
    childrenRequired
    Description
    Toggle components, each with a value.
    Type
    ReactNode

    Data attributes

    Section titled “Data attributes”
    • data-component="toggle-group": on the root element.
    • data-orientation: from Base UI.
    • data-disabled: when disabled is set.