Checkbox
Checkboxes are most commonly used to give users a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have users indicate they agree to specific terms and services.
Version 0.5.3
StorybookInstallation
To install @igloo-ui/checkbox in your project, you will need to run the following command using npm:
npm install @igloo-ui/checkbox
If you prefer Yarn, use the following command instead:
yarn add @igloo-ui/checkbox
Usage
Then to use the component in your code just import it!
import Checkbox from '@igloo-ui/checkbox';
<Checkbox htmlFor="checkbox-id">Label</Checkbox>;
API
| Prop | Type | Default | Description |
|---|---|---|---|
appearance | CheckboxAppearance | The appearance of the checkbox | |
children | ReactNode | - | The content to display inside the label |
className | string | - | Add a specific class to the checkbox |
dataTest | string | - | Add a data-test tag for automated tests |
htmlFor | string | - | Indicates the ID of the element that is controlled by the checkbox |
checked | boolean | Modifies true/false value of the native checkbox | |
disabled | boolean | Modifies the native disabled state of the native checkbox | |
indeterminate | boolean | Applies an indeterminate state to the checkbox | |
onChange | (e: ChangeEvent<HTMLInputElement>) => void | - | Function called when the value changes. |