Skip to content

Demos

Radio group

Radio Group:
<Radio.Group
label="Radio Group:"
on_change={({ value }) => {
console.log('on_change', value)
}}
value="first"
>
<Radio label="First" value="first" />
<Radio label="Second" value="second" />
<Radio label="Third" value="third" />
</Radio.Group>

Vertical aligned Radio group

Vertical Group:
<Radio.Group
label="Vertical Group:"
layout_direction="column"
on_change={({ value }) => {
console.log('on_change', value)
}}
>
<Radio label="First" value="first" />
<Radio label="Second" value="second" />
<Radio label="Third" value="third" checked />
</Radio.Group>

Radio group with label above

Vertical Group:
<Radio.Group
vertical
label="Vertical Group:"
layout_direction="column"
on_change={({ value }) => {
console.log('on_change', value)
}}
>
<Radio label="First" value="first" />
<Radio label="Second" value="second" />
<Radio label="Third" value="third" checked />
</Radio.Group>

Radio group with status messages

Radio Group with status:
Error messageInfo message
<Radio.Group
label="Radio Group with status:"
layout_direction="column"
on_change={({ value }) => {
console.log('on_change', value)
}}
>
<Radio label="First" value="first" status="error" />
<Radio label="Second" value="second" status="Error message" />
<Radio
label="Third"
value="third"
checked
status="Info message"
status_state="info"
/>
</Radio.Group>

Plain Radio group

Without <Radio.Group>. It is recommended to use the <Radio.Group> if you are using React.

Plain Radio group:
<FormRow label="Plain Radio group:">
<Radio
value="first"
label="First"
group="MyRadioGroup"
on_change={({ value, checked }) => {
console.log('on_change', value, checked)
}}
right
/>
<Radio
value="second"
label="Second"
group="MyRadioGroup"
on_change={({ value, checked }) => {
console.log('on_change', value, checked)
}}
right
/>
<Radio
checked
value="third"
label="Third"
group="MyRadioGroup"
on_change={({ value, checked }) => {
console.log('on_change', value, checked)
}}
right
/>
</FormRow>

With different sizes

As for now, there are two sizes. medium is the default size.

<Radio size="medium" label="Medium" right="large" checked />
<Radio size="large" label="Large" checked />

Disabled Radio Group

With label_position set to left.

Disabled Group:
<Radio.Group
label="Disabled Group:"
disabled
label_position="left"
name="MyGroup"
>
<Radio label="First" value="first" />
<Radio label="Second" value="second" />
<Radio label="Third" value="third" checked />
</Radio.Group>

Radio Buttons with a suffix

With suffixes:
Error message
<Radio.Group label="With suffixes:" label_position="left">
<Radio label="First" value="first" />
<Radio
label="Second"
value="second"
suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
/>
<Radio
label="Third"
value="third"
status="Error message"
suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
checked
/>
</Radio.Group>