Checkboxes allow the user to select one or more items from a set.
import { PCheckbox } from 'pearkit';Checkbox is used as a controlled input with checked and onChange properties.
const [checked, setChecked] = useState(true);
<PCheckbox checked={checked} onChange={() => setChecked(!checked)} />You can add it to the text by sending the label prop.
<PCheckbox label="Checkbox 1" />Since we use the tailwind color palette in our design, you can use the names of all tailwind colors as props. For example : sky red indigo
<PCheckbox />
<PCheckbox color="red" />
<PCheckbox color="orange" />
<PCheckbox color="indigo" />
<PCheckbox color="green" />You can manage this process by sending a boolean value to the invalid prop of the checkbox component using form validation libraries.
<PCheckbox invalid={true} />You can manage this process by sending a boolean value to the disabled prop of the checkbox component.
<PCheckbox disabled />None
Here you can see all the working features for the checkbox component.
| Name | Type | Default | Description |
|---|---|---|---|
| label | null | null | Label of the component. |
| color | string | Tailwind Color Names | blue | Colors of the component. |
| invalid | boolean | true | false | false | Control invalid status of the component. |