Checkbox

Component to select one or more options.

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.

Usage

Import

To import the component you just have to use this code below.


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

Appearance

Sorry! There are currently no variants and sizes available.

Props

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`

Group Props

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