The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Checkbox

A checkbox form input for multi-choice user selection
<Stack>

  <Checkbox id="checkbox-option1" label="Option 1" />

  <Checkbox id="checkbox-option2" label="Option 2" />

</Stack>

Props
Link to this heading

<Checkbox>

import { Checkbox } from '@strum/react';
name
type
default
checked
CheckedState
-
error
string
-
id*
Required
string
-
label*
Required
string
-
onCheckedChange
(checked: CheckedState) => void
-
ref
Ref<HTMLButtonElement>
-

Disabled state
Link to this heading

<Stack>

  <Checkbox id="enabled-checkbox1" label="Option 1" />

  <Checkbox disabled id="disabled-checkbox2" label="Option 2" />

  <Checkbox id="enabled-checkbox3" label="Option 3" />

</Stack>

Error state
Link to this heading

<Stack>

  <Checkbox

    error="You must agree to the terms of service"

    id="error-checkbox1"

    label="I agree"

  />

</Stack>

Controlled input
Link to this heading

To control your checkbox component with React, simply include a checked boolean prop and a onCheckedChange function prop.

<Checkbox

  checked={checked}

  id="controlled-checkbox"

  label={`The value is ${checked}`}

  onCheckedChange={changeCheckboxValue}

/>
Edit on GitHub