Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    RadioGroup

    Gathers options that exclude each other under one legend and allows exactly one choice.

    Storybook
    Storybook
    Source
    Source

    Installation

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

    RadioGroup and Radio are in the @bigbang/ui package. A Radio works only inside a RadioGroup.

    import { Radio, RadioGroup } from '@bigbang/ui';
    

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

    Props

    Section titled “Props”

    RadioGroup

    Section titled “RadioGroup”
    labelRequired
    Description
    The question or topic of the group, rendered as the <legend> that names the radio group.
    Type
    string
    description
    Description
    Help text under the legend, linked to the group with aria-describedby.
    Type
    ReactNode
    error
    Description
    When set, the group and every item are invalid and the message is linked to the group after the description.
    Type
    string
    required
    Description
    One item must be selected: 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
    Value of the selected item when you control it. Use it with onValueChange.
    Type
    string
    defaultValue
    Description
    Value of the selected item on first render when you do not control it.
    Type
    string
    onValueChange
    Description
    Called with the value of the newly selected item.
    Type
    (value: string) => void
    name
    Description
    Field name used when the form is submitted.
    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
    Radio components, each with a value.
    Type
    ReactNode

    Radio

    Section titled “Radio”
    labelRequired
    Description
    The visible text next to the circle; it names the radio and clicking it selects the item.
    Type
    ReactNode
    description
    Description
    Help text under the label, linked with aria-describedby.
    Type
    ReactNode
    valueRequired
    Description
    Value of the item; the RadioGroup reports it when the item is selected.
    Type
    string
    disabled
    Description
    Turns off this item only; the others stay selectable.
    Type
    boolean
    Default
    false
    className
    Description
    For layout only: margins and placement.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="radio-group": on the root <fieldset>; data-component="radio": on the root of each item.
    • RadioGroup data-part: legend, description, items, error.
    • Radio data-part: circle, indicator, label, description.
    • data-invalid: on the group when error is set. data-checked, data-unchecked, data-disabled: on the circle, from Base UI.