Radio Button

A simple boolean radio button.

Examples

Plain Radio Button

<RadioButton
  size="small|medium(default)"
  checked
  indeterminate
/>

With label

A radio button with a label

A radio button with a label

And some meta text

A radio button with a label that is really long and goes on and on and on

And STILL has even more meta text wow

A radio button with a label

A radio button with a label

And some meta text

A radio button with a label that is really long and goes on and on and on

And STILL has even more meta text wow

<RadioButton 
  ...
  label="A radio button with a label"
  meta="And some meta text"
/>

With Critical, Warning, Success, and Disabled States

<RadioButton
  ...
  state="''(default)|critical|warning|success"
/>

With children

A radio button with a label

Child content only visible when checked.

A radio button with a label

And some meta text

Child content always visible.

A radio button with a label

Child content only visible when checked.

A radio button with a label

And some meta text

Child content always visible.

<RadioButton 
  ...
  alwaysShowChildren
/>

As a list

A list of radio choices

Just pick one

A radio button with a label

A radio button with a label

And some meta text

A radio button with a label that is really long and goes on and on and on

And STILL has even more meta text wow

A list of radio choices

Just pick one

A radio button with a label

A radio button with a label

And some meta text

A radio button with a label that is really long and goes on and on and on

And STILL has even more meta text wow

<RadioButtonGroup
  name="choice"
  label="A list of radio choices"
  helperText="Just pick one"
>
  <RadioButton value="a" defaultChecked />
  <RadioButton value="b" />
  <RadioButton value="c" />
</RadioButtonGroup>

As a controlled list

A list of radio choices

Just pick one

A radio button with a label

A radio button with a label

And some meta text

A radio button with a label that is really long and goes on and on and on

And STILL has even more meta text wow

A list of radio choices

Just pick one

A radio button with a label

A radio button with a label

And some meta text

A radio button with a label that is really long and goes on and on and on

And STILL has even more meta text wow

<RadioButtonGroup
  ...
  value="a"
  onChange={(evt, value) => ...}
>
  <RadioButton value="a" />
  <RadioButton value="b" />
  <RadioButton value="c" />
</RadioButtonGroup>

Props

Name	Type	Default Value	Required	Description
alwaysShowChildren	boolean	false	No	Should the children display even if `checked=false`?
indeterminate	boolean	false	No	Show a partially selected checkbox when `checked=true`.
label	ReactNode		No	A string or component to display as a label above the input
meta	ReactNode		No	A string or component to display as meta text beneath the input
onChange	FormControlChangeEventHandler<InputType, string | number | readonly string[] | (string | number | readonly string[])[]> | undefined		No	Emit a new value when the input's selected value changes.
size	"small" | FormControlSize | "medium"	FormControlSize.Medium	No	The size of the field
state	"" | FormControlState | "critical" | "warning" | "success"	FormControlState.Default	No	The state of the field

Enums

FormControlSize

Key	Value
Small	"small"
Medium	"medium"

FormControlState

Key	Value
Default	""
Critical	"critical"
Warning	"warning"
Success	"success"