Radio Group
A group of radio buttons, ensuring a single choice among multiple options.
Helper text
Usage
import { RadioGroup } from "@lemonsqueezy/wedges";<RadioGroup defaultValue="value-1" label="Label">
<RadioGroup.Item label="Value 1" value="value-1" />
<RadioGroup.Item label="Value 2" value="value-2" />
</RadioGroup>API Reference
RadioGroup component extends Radix Radio Group primitive and supports all of its props.
RadioGroup
Contains all parts of a radio group.
| Prop | Value | Default |
|---|---|---|
asChild | boolean | false |
defaultValue | string | / |
description | ReactNode | / |
dir | "ltr" | "rtl" | "ltr" |
disabled | boolean | false |
label | ReactNode | / |
loop | boolean | true |
name | string | / |
onValueChange | function | / |
orientation | "horizontal" | "vertical" | "vertical" |
required | boolean | false |
tooltip | ReactNode | / |
value | string | / |
| Data attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
RadioGroup.Item
An item in the group that can be checked. An input element will also be rendered when used within a form to ensure events propagate correctly.
| Prop | Value | Default |
|---|---|---|
asChild | boolean | false |
description | ReactNode | / |
disabled | boolean | false |
label | ReactNode | / |
required | boolean | false |
tooltip | ReactNode | / |
value | string | / |
| Data attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
[data-state] | "checked" | "unchecked" |
Accessibility
The RadioGroup component supports all accessibility features of the Radix Radio Group primitive.
Examples
Helper text
Helper text
Helper text