Checkboxes allow users to select any number of options from a list.
import { Checkbox } from "@nulogy/components";
<Checkbox id="checkbox" labelText="I am a checkbox" />
<Checkbox id="disabled-checkbox" labelText="I am a checkbox" disabled />
<Checkbox id="error-checkbox" labelText="I am a checkbox" error />
<Checkbox id="disabled-checkbox" labelText="I am a checkbox" defaultChecked="true"/>
<Checkbox labelText="I am an indeterminate checkbox" checked indeterminate />
Name | Type | Default | Description |
---|---|---|---|
id | String | null | A unique ID for this input |
name | String | undefined | Identified that groups inputs together |
defaultChecked | Boolean | false | Makes the field checked by default |
disabled | Boolean | false | Marks the field as disabled and disallows user input |
error | Boolean | false | Marks the field as invalid and turns red |
labelText | String | Required | Label for the input |
onChange | Function | null | |
required | Boolean | false | Makes the field require input before the form will submit |
className | String | undefined | className passed to the wrapper |
checked | Boolean | false | Whether or not the checkbox has been checked |
indeterminate | boolean | undefined | Displays the checkbox in an indeterminate state if checked. You must use the checkbox as a controlled input (give the checked prop a value) when using this prop |
value | String | undefined | The value of the checkbox that is submitted with the form. Required when using `indeterminate` checkbox. |