Skip to content



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.


Radio Group:

Radio group

Vertical Group:

Vertical aligned Radio group

Radio Group with status:
Error messageInfo message

Radio group with status messages

Plain Radio group without <Radio.Group>. It is recomended to use the <Radio.Group> if You are using React.

Disabled Group:

Disabled Radio group with label_position set to left

External state update with possible event on_state_update