Checkbox

Checkboxes are used for selecting multiple values from several options.

If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.

Simple Checkboxes

Sizes

To have the larger or smaller checkboxes, use the size property.

Small

Medium (default)

Large

Controlled Checkboxes

You can use the checked, and onChange properties to control the behaviour of the checkbox.

Label

With CheckGroup

CheckGroup is a helpful wrapper used to group and manage checkbox controls with an easier API. CheckGroup can also be controlled/uncontrolled like the checkboxes.
To learn more about CheckGroup's API, read it's documentation.

Burger

Sushi

Kebab

API

Learn more about the properties and the customization points.

Usage

import Checkbox from "@sonnat/ui/Checkbox";

//or
import { Checkbox } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Checkbox Properties
Name	Type	Default	Description
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
label	string	-	If `label` was provided, a `<label>` element will be rendered next to the checkbox.
name	string	-	The name of the checkbox.
value	string	-	The value of the checkbox. The DOM API casts this to a string. The browser uses `"on"` as the default value.
size	"large" \| "medium" \| "small"	"medium"	The size of the checkbox.
indeterminated	boolean	false	If `true`, the checkbox will appear indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers.
autoFocus	boolean	false	If `true`, the checkbox will be focused automatically.
fluid	boolean	false	If `true`, the checkbox will fill the entire width of the parent.
readOnly	boolean	false	If `true`, the checkbox will be read-only.
checked	boolean	-	If `true`, the checkbox will be checked.
defaultChecked	boolean	-	The default state of `checked`. Use when the component is not controlled.
disabled	boolean	false	If `true`, the checkbox will be disabled.
required	boolean	false	If `true`, the checkbox will be required.
hasError	boolean	false	If `true`, the checkbox will indicate invalid input.
inputProps	object	-	The properties applied to the `input` element.
labelProps	object	-	The properties applied to the `label` element.
onChange	function	-	The callback fires when the state has changed. Signature: `function(checkedState: boolean) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.