Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

RadioButton

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Allow the user to select one item from a group.

import { RadioButtonGroup } from '@kubit-ui-web/react-components'
12345678910
 <RadioButtonGroup variant="" legend="" name="" options="" />
<RadioButtonGroupUnControlled
  variant="DEFAULT"
  legend="Select an option"
  name="radio_basic"
  options={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
  ]}
/>

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefined style for its quick use, access them through the variant prop.

123456789
<RadioButtonGroupUnControlled
  variant="DEFAULT"
  legend="Select an option"
  name="name"
  options={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
  ]}
/>

Required

It's possible to mark the component as required using the required prop. Optionally, use the prop requiredSymbol to modify the symbol associated.

12345678910
<RadioButtonGroupUnControlled
  variant="DEFAULT"
  legend="Select an option"
  name="radio_required"
  options={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
  ]}
  required={true}
/>

Default selected option

Set the default selected option through the defaultSelectedOption prop.

12345678910
<RadioButtonGroupUnControlled
  variant="DEFAULT"
  legend="Select an option"
  name="radio_default_selected"
  options={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
  ]}
  required={true}
  defaultSelectedOption={{label: 'Option 2', value: '2'}}

Disabled

Disable the entire radio button group setting the state prop to DISABLED.

12345678910
<RadioButtonGroupUnControlled
  variant="DEFAULT"
  legend="Select an option"
  name="radio_disabled"
  options={[
    { label: 'Option disabled', value: '1' },
    { label: 'Option 2', value: '2' },
  ]}
  state="DISABLED"
/>

Disable specific options

Disable some options through the state option prop.

123456789
<RadioButtonGroupUnControlled
  variant="DEFAULT"
  legend="Select an option"
  name="radio_disable_option"
  options={[
    { label: 'Option disabled', value: '1', state: 'DISABLED' },
    { label: 'Option 2', value: '2' },
  ]}
/>

Tooltip

If extra guidance is needed a tooltip component can be added. Check here the specifications. For a quick use, this props can be set:

  • infoIcon: trigger element that will show the tooltip.
  • tooltip: content that will be displayed.
12345678910
<RadioButtonGroupUnControlled
  variant="DEFAULT"
  legend="Select an option"
  name="radio_tooltip"
  options={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: 'S' },
  ]}
  infoIcon={{ icon: 'ICON_PLACEHOLDER' }}
  tooltip={{
Pill V2Accessibility
RadioButtonDesign Specs