Radio Group
Radio Group provides a set of radio buttons that allow users to select a single option from multiple choices. The options are mutually exclusive - selecting one deselects the others.
Example
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop label | Type ReactNode | Default value undefined | Description Label text or content displayed above the radio group |
Prop error | Type ReactNode | Default value undefined | Description Error message or content displayed when validation fails |
Prop inline | Type boolean | Default value true | Description Whether radio items are displayed inline (horizontally) or stacked (vertically) |
Prop orientation | Type "vertical" | "horizontal" | Default value "horizontal" | Description Layout orientation - whether items are arranged vertically or horizontally |
Prop dir | Type "start" | "end" | Default value "start" | Description Direction/position of labels relative to radio buttons (start = before, end = after) |
Prop itemDir | Type "rtl" | "ltr" | Default value "ltr" | Description Text direction for radio items - left-to-right or right-to-left |
Prop disabled | Type boolean | Default value false | Description Whether the entire radio group is disabled |
Prop value | Type string | Default value undefined | Description Currently selected value for controlled radio groups |
Prop defaultValue | Type string | Default value undefined | Description Default selected value for uncontrolled radio groups |
Prop onValueChange | Type (value: string) => void | Default value undefined | Description Callback function called when the selected value changes. Receives the new value. |
RadioGroup.Item Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop value | Type string | Default value undefined | Description Unique value for this radio option. Required. |
Prop label | Type ReactNode | Default value undefined | Description Label text or content displayed next to the radio button |
Prop disabled | Type boolean | Default value false | Description Whether this specific radio item is disabled |
Quick Start
import { RadioGroup } from '@clickhouse/click-ui'
import { useState } from 'react'
function MyRadioGroup() {
const [value, setValue] = useState('option1')
return (
<RadioGroup label="Select an option" value={value} onValueChange={setValue}>
<RadioGroup.Item value="option1" label="Option 1" />
<RadioGroup.Item value="option2" label="Option 2" />
<RadioGroup.Item value="option3" label="Option 3" />
</RadioGroup>
)
}Related Components
- Checkbox: For selecting one or more items from a list.
- Switch: For toggle switches between two states.
- Label: Provides accessible labels for radio groups.
- Container: For organizing radio groups within layouts.
Common Use Cases
Form Radio Selection
import { RadioGroup } from '@clickhouse/click-ui'
import { useState } from 'react'
function FormRadioSelection() {
const [plan, setPlan] = useState('basic')
return (
<RadioGroup label='Select a plan' value={plan} onValueChange={setPlan}>
<RadioGroup.Item value='basic' label='Basic Plan' />
<RadioGroup.Item value='pro' label='Pro Plan' />
<RadioGroup.Item value='enterprise' label='Enterprise Plan' />
</RadioGroup>
)
}Settings Radio
import { RadioGroup } from '@clickhouse/click-ui'
import { useState } from 'react'
function SettingsRadio() {
const [theme, setTheme] = useState('light')
return (
<RadioGroup label='Theme' value={theme} onValueChange={setTheme}>
<RadioGroup.Item value='light' label='Light' />
<RadioGroup.Item value='dark' label='Dark' />
<RadioGroup.Item value='auto' label='Auto' />
</RadioGroup>
)
}Vertical Layout
import { RadioGroup } from '@clickhouse/click-ui'
import { useState } from 'react'
function VerticalRadioGroup() {
const [value, setValue] = useState('option1')
return (
<RadioGroup label='Vertical options' value={value} onValueChange={setValue} inline={false}>
<RadioGroup.Item value='option1' label='Option 1' />
<RadioGroup.Item value='option2' label='Option 2' />
<RadioGroup.Item value='option3' label='Option 3' />
</RadioGroup>
)
}With Error State
Please select an option