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 aligned Radio group

Vertical Group:

Radio group with status messages

Radio Group with status:
Error messageInfo message

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

Plain Radio group:

With different sizes

Disabled Radio group with label_position set to left

Disabled Group:

Radio Buttons with suffix

With suffixes:
Error message