Radio

Description

The Radio component is shown as a circle that is filled (checked) when activated. Radio buttons are used to let a user select one option / value of a limited number of choices within a group of Radio buttons.

It is recommended to use it in a group. You can use either the React component <Radio.Group> or use the property group="NAME" to define the group.

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 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"
labelledby="MyRadioGroup"
on_change={({ value, checked }) => { console.log('on_change', value, checked) }}
right
/>
<Radio
value="second"
label="Second"
group="MyRadioGroup"
labelledby="MyRadioGroup"
on_change={({ value, checked }) => { console.log('on_change', value, checked) }}
right
/>
<Radio
checked
value="third"
label="Third"
group="MyRadioGroup"
labelledby="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>