Checkbox

The <Checkbox> component allows users to select one or more options from a set of options. In order to group multiple checkboxes, use the <CheckboxGroup> component.

There are several props for the <Checkbox> and the <CheckboxGroup>.

You don't have to click on the <Checkbox> itself, you can also just click on the label next to the box.

Import


import { Checkbox, CheckboxGroup } from '@marigold/components';

Appearance

Property	Type	Description
`variant`		The available variants of this component.
`size`	`small`	The available sizes of this component.

Props

Checkbox

Property	Type	Default	Description
`error`	`boolean`	`false`	If `true`, the checkbox is considered invalid and if set the `errorMessage` is shown instead of the `description`.
`width`	`string \| number`	`full`	Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
`defaultChecked`	`boolean`	`false`	Select the checkbox by default
`checked`	`boolean`	`false`	Select the checkbox.
`indeterminate`	`boolean`	`false`	Use when it represents both selected and not selected values.
`readOnly`	`boolean`	`false`	Sets the checkbox on read only.
`required`	`boolean`	`false`	Sets the checkbox as required.
`...`		`-`	You can use all native attributes of `input`

Checkbox.Group

Property	Type	Default	Description
`label`	`string`	`none`	Set the label for the checkbox group.
`error`	`boolean`	`false`	If `true`, the checkbox is considered invalid and if set the `errorMessage` is shown instead of the `description`.
`defaultChecked`	`boolean`	`false`	Select the checkbox by default
`checked`	`boolean`	`false`	Select the checkbox.
`readOnly`	`boolean`	`false`	Sets the checkbox on read only.
`required`	`boolean`	`false`	Sets the checkbox as required.
`value`	`string[]`	`none`	Set the values of the group.
`defaultValue`	`string[]`	`none`	Set the default values of the group.
`onChange`	`(value: string[]) => void`	`none`	Handler that is called when the checkbox value changes.
`description`	`string`	`none`	Sets a helptext for the group.
`errorMessage`	`string`	`none`	Sets a error message for the group if a error occured.

Examples

Checkbox disabled

Here you can see how the disabled property is to use.

Preview

Code

Disabled

Checked and disabled

Indeterminate Checkbox

Use indeterminate state when it represents both selected and not selected values.

Preview

Code

Select all

In this example the <Checkbox> are wrapped within the <CheckboxGroup>. You see that the onChange property is also set. It has also a helptext within which you can set with the description property for the <CheckboxGroup>.

Preview

Code