Components

Checkbox

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

Code examples

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.

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

A checkbox

Name	Type	Description
`checked`	`boolean`
`defaultChecked`	`boolean`
`disabled`	`boolean`
`invalid`	`boolean`
`onCheckedChange`	`(details: CheckedChangeDetails) => void`	Callback for when the checkbox changes
`value`	`string`	The returned value
`form`	`string`	The id of the form that the checkbox belongs to.
`id`	`string`	The unique identifier of the machine.
`ids`	`Partial<{ root: string hiddenInput: string control: string label: string }>`	The ids of the elements in the checkbox. Useful for composition.
`name`	`string`	The name of the input field in a checkbox. Useful for form submission.
`readOnly`	`boolean`
`required`	`boolean`

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

Groups Checkbox components

Name	Type	Description
`defaultValue`	`string[]`	Array of initially checked values
`onCheckedChange`	`function`	Callback for when the checkbox selection changes
`disabled`	`boolean`
`direction`	`"row" \| "column" \| "row-reverse" \| "column-reverse"`	Default "row"
`gap`	`string \| number`	Space between checkboxes. Default is 1