import { useState } from 'react'; import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'; import { action } from "@storybook/addon-actions"; import { Checkbox } from "./Checkbox.tsx";
<Meta title="Components/Checkbox" component={Checkbox} argTypes={{ readOnly: {control: {type: 'boolean'}}, checked: {control: {type: 'boolean'}}, label: {control: {type: 'text'}}, onChange: {action: 'Checkbox component onChange'}, }} args={{ label: 'Checkbox' }} />
The checkboxes are applied when users can select all, several, or none of the options from a given list.
The checkbox control allows three states: selected, unselected, and undetermined. The undetermined state comes into play when the checkbox contains a sublist of selections, some of which are selected, and others aren't.
Users must be able to check the box by clicking directly on the box or by clicking on its label.
If necessary, a header can accompany a set of checkboxes to provide more context or clarity.
Always use clear and concise labels for the checkboxes. The labels appears on the right of the checkboxes.
Use this playground to test the checkbox component
{(args) => { return ; }} {(args) => { return ( <> ) }} {(args) => { return ( <> ) }} {(args) => { const [checked, setChecked] = useState(true); return ( setChecked(newCheck)}/> ) }}