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.
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
Indeterminate Checkbox
Use indeterminate state when it represents both selected and not selected values.
Preview
Code
Group checkboxes
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
Choose your toppings:
Just click on the options
Selected values: