Checkbox

Examples
Standard Checkbox
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Checkbox checked={false} id="id" label="Label" />
Checkbox without Message Placeholder
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Checkbox checked={false} id="id" label="Label" />
Checked Checkbox
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Checkbox checked={true} id="id" label="Label" />
Disabled Checkbox
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Checkbox checked={false} disabled={true} id="id" label="Label" />
Critical Checkbox
Theme: seekAnz
This is a critical message
Theme: seekBusiness
This is a critical message
Theme: jobsDbRebrand
This is a critical message
Theme: jobsDb
This is a critical message
Theme: jobStreet
This is a critical message
Theme: jobStreetClassic
This is a critical message
Theme: wireframe
This is a critical message
Code:
<Checkbox
  checked={false}
  id="id"
  label="Label"
  message="This is a critical message"
  tone="critical"
/>
Nested Checkbox
Theme: seekAnz
This text is visible when the checkbox is checked.
Theme: seekBusiness
This text is visible when the checkbox is checked.
Theme: jobsDbRebrand
This text is visible when the checkbox is checked.
Theme: jobsDb
This text is visible when the checkbox is checked.
Theme: jobStreet
This text is visible when the checkbox is checked.
Theme: jobStreetClassic
This text is visible when the checkbox is checked.
Theme: wireframe
This text is visible when the checkbox is checked.
Code:
<Checkbox checked={true} id="id" label="Label">
  <Text>This text is visible when the checkbox is checked.</Text>
</Checkbox>

Required props

id
string
label
ReactNode
onChange
(event: FormEvent<HTMLFormElement>) => void
checked
boolean

Optional props

value
string | number | string[]
name
string
disabled
boolean
message
ReactNode
reserveMessageSpace
boolean
tone
"critical" | "neutral"
children
ReactNode
data
Record<string, string | number>
required
boolean
ref
(instance: HTMLInputElement | null) => void | RefObject<HTMLInputElement>

Further References