Checkbox

A basic Checkbox form input.

Props

Name	Type	Description
onChange*	func	The change event handler.
name*	string	A unique semantic name that is connected to the label.
description	string	Additional description information display beneath the input.
disabled	bool	Sets disabled.
errorMessage	string	An error message text that is displayed once isValid is false.
isValid	bool	Sets the validation state.
label	string, node	The label text.
required	bool	Sets required.
value	bool	The controlled value.

Examples

Dark Mode
Open in Playroom

Description & Error Message

Dark Mode
Open in Playroom

<Box space={4}>
  <Checkbox label="Default" description="Some description" />
  <Checkbox
    label="Error"
    description="Some description"
    errorMessage="This needs to be checked"
    isValid={false}
  />
  <Checkbox
    label="Error"
    errorMessage="Something wrong"
    value={true}
    isValid={false}
  />
</Box><Box space={4}>
  <Checkbox label="Default" description="Some description" />
  <Checkbox
    label="Error"
    description="Some description"
    errorMessage="This needs to be checked"
    isValid={false}
  />
  <Checkbox
    label="Error"
    errorMessage="Something wrong"
    value={true}
    isValid={false}
  />
</Box>

Disabled

Dark Mode
Open in Playroom

<Box space={4}>
  <Checkbox label="Default" disabled={true} />
  <Checkbox label="Checked" disabled={true} value={true} />
  <Checkbox
    label="Error + Checked"
    errorMessage="Something went wrong."
    isValid={false}
    disabled={true}
    value={true}
  />
</Box><Box space={4}>
  <Checkbox label="Default" disabled={true} />
  <Checkbox label="Checked" disabled={true} value={true} />
  <Checkbox
    label="Error + Checked"
    errorMessage="Something went wrong."
    isValid={false}
    disabled={true}
    value={true}
  />
</Box>