RadioGroup

Exclusive choice with a string value. optionType="button" renders a segmented control instead of radios.


import { RadioGroup } from '@gg-software/ui';
 
<RadioGroup
    label="Plan"
    options={[
        { label: 'Basic', value: 'basic' },
        { label: 'Pro', value: 'pro' },
    ]}
    value={plan}
    onChange={(value) => setPlan(value)}
/>
 
// segmented control
<RadioGroup optionType="button" direction="horizontal" options={views} />

Props

Prop	Type	Default	Description
`options`*	`RadioGroupOption[]`	—
`value`	`string`	—
`defaultValue`	`string`	—
`onChange`	`((value: string) => void)`	—
`disabled`	`boolean`	`false`
`direction`	`"horizontal" \| "vertical"`	`vertical`
`optionType`	`"default" \| "button"`	`default`	"default" = radios, "button" = segmented control
`label`	`ReactNode`	—
`hint`	`ReactNode`	—
`error`	`ReactNode`	—
`required`	`boolean`	—
`name`	`string`	—
`className`	`string`	—

* required · generated from packages/ui/src/input/RadioGroup/RadioGroup.tsx

Types


type RadioGroupOption = {
    label: ReactNode;
    value: string;
    disabled?: boolean;
};