Toggle

A simple boolean toggle.

Examples

Plain Toggle

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

As Radio Button

<Toggle 
  ...
  name="some-name" 
  type="radio" 
/>

With label

A toggle with a label

A toggle with a label

A toggle with a label

And some meta text

A toggle with a label

And some meta text

A toggle with a label that is really long and goes on and on and on

And STILL has even more meta text wow

A toggle with a label that is really long and goes on and on and on

And STILL has even more meta text wow

<Toggle 
  ...
  label="A toggle with a label"
  meta="And some meta text"
/>

With Critical, Warning, Success, and Disabled States

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

Controlled Toggle

<Toggle
  size="small|medium(default)"
  checked
  onChange={(evt, checked) => ...}
/>

As a list

A list of toggle choices

Just pick one

A toggle with a label

A toggle with a label

And some meta text

A toggle 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 toggle choices

Just pick one

A toggle with a label

A toggle with a label

And some meta text

A toggle with a label that is really long and goes on and on and on

And STILL has even more meta text wow

<ToggleGroup
  name="choice"
  label="A list of toggle choices"
  helperText="Just pick one"
>
  <Toggle value="a" defaultChecked />
  <Toggle value="b" />
  <Toggle value="c" />
</ToggleGroup>

As a controlled list

A list of toggle choices

Selected Values: a

A toggle with a label

A toggle with a label

And some meta text

A toggle 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 toggle choices

Selected Values: a

A toggle with a label

A toggle with a label

And some meta text

A toggle with a label that is really long and goes on and on and on

And STILL has even more meta text wow

<ToggleGroup
  ...
  values={['a']}
  onChange={(evt, values) => ...}
>
  <Toggle value="a" />
  <Toggle value="b" />
  <Toggle value="c" />
</ToggleGroup>

As a controlled radio list

A list of toggle choices

Selected Value: a

A toggle with a label

A toggle with a label

And some meta text

A toggle 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 toggle choices

Selected Value: a

A toggle with a label

A toggle with a label

And some meta text

A toggle with a label that is really long and goes on and on and on

And STILL has even more meta text wow

<ToggleGroup
  ...
  type="radio"
  value="a"
  onChange={(evt, value) => ...}
>
  <Toggle value="a" />
  <Toggle value="b" />
  <Toggle value="c" />
</ToggleGroup>

Props

Toggle

Name	Type	Default Value	Required	Description
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

ToggleGroup

Name	Type	Default Value	Required	Description
disabled	boolean	false	No	Should the field be considered disabled?
fieldClassName	string		No	A className to apply to the field.
fieldProps	Record<string, unknown>		No	Any props to spread onto the field container.
helperText	ReactNode		No	A string or component to display as helper text beneath the input
label	ReactNode		No	A string or component to display as a label above the input
name	string	''	No	The name for the radio group.
onChange	OnChangeSingle | OnChangeMultiple		No	Emit a new value when the group's selected values change.
required	boolean	false	No	Is the field required?
resize	boolean	false	No	Enable or disable resizing.
size	"small" | FormControlSize | "medium"	FormControlSize.Medium FormControlSize.Medium	No	The size of the field The size of the field.
state	"" | FormControlState | "critical" | "warning" | "success"	FormControlState.Default FormControlState.Default	No	The state of the field
type	"checkbox" | "radio"	checkbox	No	The type of the input. Should this render/behave as a checkbox or radio button?
value	string | number | readonly string[]		No	The currently selected value. Don't allow value when dealing with a checkbox.
values	(string | number | readonly string[])[]	[]	No	Don't allow values when dealing with a radio. A list of selected values.