Skip to content
Home

Radio

Info
Demos
Properties
Events

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 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>