Checkbox

Component for making n selections among n options.

STATUS: This component is in development.

Single checkbox

The Checkbox can be used alone, withouth the CheckboxList. In this scenario, create a useState hook of type boolean, and toggle the checked-prop and pass in the setValue directly.

Multiple checkbox

When using multiple checkboxes, nest the checkboxes inside a CheckboxList. Here, only add a value of type string to each Checkbox and add the useState hook to the CheckboxList props - value and setValue. value will be an array of checked values.

Horizontal usage

CheckboxList defaults to a vertical list of checkboxes. Add the horizontal-prop to list them horizontally.

Error

Pass in the hasError-prop to toggle the error colors and error message, passed in by the errorMessage-prop. The hasError-prop can also be sent to an individual checkbox.

Custom error

Customize the errorMessage by poassing in a Message like this.

Disabled

Alle checkboxes can be disabled individually, by utilizing the disabled-prop.

With numbers

The checkboxes can function as a filter, or eny other suiting usecase, where you want to display the amount of content inside the checkbox, by using the number-prop.