Checkbox

A simple boolean checkbox.

Examples

Plain Checkbox

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

With label

A checkbox with a label

A checkbox with a label

A checkbox with a label

And some meta text

A checkbox with a label

And some meta text

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

And STILL has even more meta text wow

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

And STILL has even more meta text wow

<Checkbox 
  ...
  label="A checkbox with a label"
  meta="And some meta text"
/>

With Critical, Warning, Success, and Disabled States

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

With children

A checkbox with a label

Child content only visible when checked.

A checkbox with a label

Child content only visible when checked.

A checkbox with a label

And some meta text

Child content always visible.

A checkbox with a label

And some meta text

Child content always visible.

<Checkbox 
  ...
  alwaysShowChildren
/>

Controlled Checkbox

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

As a list

A list of radio choices

Selected Values: a

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

Selected Values: a

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

<CheckboxGroup
  name="labeled"
  values={['a']}
  label="A list of radio choices"
  helperText="Just pick one"
  onChange={(evt, values) => ...}
>
  <Checkbox value="a" />
  <Checkbox value="b" />
  <Checkbox value="c" />
</CheckboxGroup>

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"