RadioGroup
A group of radio buttons with multiple style variants, built on Base UI’s RadioGroup primitive.
Base UI Primitive
Built on @base-ui/react/radio-group
Import
import { RadioGroup } from "@soft-ui/react/radio-group"
Usage
import { RadioGroup } from "@soft-ui/react/radio-group"
export default function Example() {
return (
<RadioGroup defaultValue="option1">
<RadioGroup.Item value="option1" label="Option 1" />
<RadioGroup.Item value="option2" label="Option 2" />
<RadioGroup.Item value="option3" label="Option 3" />
</RadioGroup>
)
}
Props
RadioGroup (Root)
style
'simple' | 'list' | 'card-small' | 'card-big'
default:"'simple'"
Visual style variant.
simple: Basic radio buttonslist: List items with borderscard-small: Compact cardscard-big: Larger cards with more content
stack
'vertical' | 'horizontal'
default:"'vertical'"
Layout direction.
vertical: Items stacked verticallyhorizontal: Items arranged horizontally (grid for some styles)
Uncontrolled default value.
Callback fired when value changes.
Disables all radio items.
Name attribute for form submission.
Makes selection required.
RadioGroup.Item
Description text (for card styles).
Examples
Simple Style
import { RadioGroup } from "@soft-ui/react/radio-group"
export default function Simple() {
return (
<RadioGroup style="simple" defaultValue="1">
<RadioGroup.Item value="1" label="Option 1" />
<RadioGroup.Item value="2" label="Option 2" />
<RadioGroup.Item value="3" label="Option 3" />
</RadioGroup>
)
}
List Style
import { RadioGroup } from "@soft-ui/react/radio-group"
export default function List() {
return (
<RadioGroup style="list" defaultValue="1">
<RadioGroup.Item value="1" label="Option 1" />
<RadioGroup.Item value="2" label="Option 2" />
<RadioGroup.Item value="3" label="Option 3" />
</RadioGroup>
)
}
Card Style
import { RadioGroup } from "@soft-ui/react/radio-group"
export default function Cards() {
return (
<RadioGroup style="card-big" defaultValue="1">
<RadioGroup.Item
value="1"
label="Basic Plan"
description="Perfect for individuals"
/>
<RadioGroup.Item
value="2"
label="Pro Plan"
description="For growing teams"
/>
</RadioGroup>
)
}
Horizontal Layout
import { RadioGroup } from "@soft-ui/react/radio-group"
export default function Horizontal() {
return (
<RadioGroup stack="horizontal" defaultValue="1">
<RadioGroup.Item value="1" label="Option 1" />
<RadioGroup.Item value="2" label="Option 2" />
<RadioGroup.Item value="3" label="Option 3" />
</RadioGroup>
)
}