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

PropertyTypeDescription
variantThe available variants of this component.
sizesmallThe available sizes of this component.

Props

Checkbox

PropertyTypeDefaultDescription
errorbooleanfalseIf `true`, the checkbox is considered invalid and if set the `errorMessage` is shown instead of the `description`.
widthstring | numberfullSets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
defaultCheckedbooleanfalseSelect the checkbox by default
checkedbooleanfalseSelect the checkbox.
indeterminatebooleanfalseUse when it represents both selected and not selected values.
readOnlybooleanfalseSets the checkbox on read only.
requiredbooleanfalseSets the checkbox as required.
...-You can use all native attributes of `input`

Checkbox.Group

PropertyTypeDefaultDescription
labelstringnoneSet the label for the checkbox group.
errorbooleanfalseIf `true`, the checkbox is considered invalid and if set the `errorMessage` is shown instead of the `description`.
defaultCheckedbooleanfalseSelect the checkbox by default
checkedbooleanfalseSelect the checkbox.
readOnlybooleanfalseSets the checkbox on read only.
requiredbooleanfalseSets the checkbox as required.
valuestring[]noneSet the values of the group.
defaultValuestring[]noneSet the default values of the group.
onChange(value: string[]) => voidnoneHandler that is called when the checkbox value changes.
descriptionstringnoneSets a helptext for the group.
errorMessagestringnoneSets a error message for the group if a error occured.

Examples

Checkbox disabled

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

Indeterminate Checkbox

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

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>.

Choose your toppings:
Just click on the options

Selected values: