/

<RadioGroup> Component

Share
Code Editor


<>

<RadioGroup

  label="Label"

  helpText="Eu, tempor dignissim in nulla ligula ac ut. Tellus nibh cras nec blandit."

  name="light"

  value="one"

  onChange={() => {}}

  errors={{ 'light': 'This is an example error message'}}

  touched={{ 'light': true }}

  options={[

    {

      label: 'One',

      value: 'one'

    },

    {

      label: 'Two',

      value: 'two'

    },

    {

      label: 'Three',

      value: 'three'

    }

  ]}

/>

</>

Examples

Light theme

Label

Eu, tempor dignissim in nulla ligula ac ut. Tellus nibh cras nec blandit.

Dark theme

Label

Eu, tempor dignissim in nulla ligula ac ut. Tellus nibh cras nec blandit.

Props

NameDescription
layout
string
Options: "stacked", "inline"
appearance
string
Render on light or dark backgrounds.
Options: "light", "dark"
label*
string
A label that describes the radio options.
helpText
string
Optional text displayed after the label.
name*
string
The name attribute that will be applied to the group of radio inputs.
value*
string
The currently selected value.
onChange*
function
A function that will be called when the button is clicked. Returns the radio options value.
error
string
If true, renders an error message.
options
object
Object contains nested props, see below:
options.label*
string
The label associated with the radio option.
options.value*
string
The value associated with the radio option.
options.disabled
boolean
If true, the radio option will be disabled.