Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
ComponentsNewUpdated

Checkbox

Use Checkbox when the user needs multiple checked options or accepting terms.

FigmaGitHub
This component is new!
This component is updated!

Examples

A simple checkbox

<Checkbox>
  Jeg liker tog
</Checkbox>

A group of checkboxes, with default checked

<CheckboxGroup defaultValue={["train", "ship"]} gap={3}>
  <Checkbox value="train">Train</Checkbox>
  <Checkbox value="bus">Bus</Checkbox>
  <Checkbox value="ship">Ship</Checkbox>
</CheckboxGroup>

Different states and vertical layout

<CheckboxGroup direction="column">
  <Checkbox disabled>Disabled</Checkbox>
  <Checkbox checked disabled>
    Disabled
  </Checkbox>
  <Checkbox readOnly>Readonly</Checkbox>
  <Checkbox invalid>Invalid</Checkbox>
</CheckboxGroup>

A controlled checkbox

() => {
  const [checked, setChecked] = React.useState(false)
  return (
    <Checkbox
      checked={checked}
      onCheckedChange={(e) => setChecked(!!e.checked)}
    >
      Check me
    </Checkbox>
  )
}

With the CheckboxGroup and Fieldset components

<Fieldset>
  <CheckboxGroup defaultValue={['train', 'bus']} direction="column">
    <FieldsetLegend>
      Choose transportation
    </FieldsetLegend>
    <FieldsetContent display="flex" flexDirection="column" gap={1}>
      <Checkbox value="train">Train</Checkbox>
      <Checkbox value="boat">Boat</Checkbox>
      <Checkbox value="walking">Walking</Checkbox>
      <Checkbox value="bus">Bus</Checkbox>
      <Checkbox value="flying">Flying</Checkbox>
    </FieldsetContent>
  </CheckboxGroup>
</Fieldset>

Guidelines

There are some things that are recommended when using checkboxes:

  • Use checkboxes when users can select multiple options.
  • If there are many options, consider using a select menu or combobox instead of checkboxes.
  • Arrange checkboxes vertically rather than horizontally to improve readability and scanning.
  • Order options alphabetically when all options are equally relevant.
  • Avoid disabled checkboxes. Consider removing the option instead, or give an explanation to why the option is disabled.

Code

<Checkbox />

import { Checkbox } from "@vygruppen/spor-react";

A checkbox

Props

Name
Type
Required?
Description
checkedboolean
defaultCheckedboolean
disabledboolean
invalidboolean
onCheckedChange(details: CheckedChangeDetails) => voidCallback for when the checkbox changes
valuestringThe returned value
formstringThe id of the form that the checkbox belongs to.
idstringThe unique identifier of the machine.
idsPartial<{ root: string hiddenInput: string control: string label: string }>The ids of the elements in the checkbox. Useful for composition.
namestringThe name of the input field in a checkbox. Useful for form submission.
readOnlyboolean
requiredboolean

<CheckboxGroup />

import { CheckboxGroup } from "@vygruppen/spor-react";

Groups Checkbox components

Props

Name
Type
Required?
Description
defaultValuestring[]Array of initially checked values
onCheckedChangefunctionCallback for when the checkbox selection changes
disabledboolean
direction"row" | "column" | "row-reverse" | "column-reverse"Default "row"
gapstring | numberSpace between checkboxes. Default is 1