Checkbox
Overview
Checkboxes
let users toggle settings on and off within a form.
When to use:
- Use
Checkboxes
when users can toggle one or more items in a form.
Implementation
Checkboxes
are a stylized input[type="checkbox"]
with controllable checked/unchecked states.
Edit the code below to see your changes live!
function Example() { const [checked, setChecked] = useState(false); const handleChange = () => setChecked(!checked); return ( <Form> <FormGroup> <Checkbox checked={checked} label={checked ? 'Checked' : 'Unchecked'} onChange={handleChange} /> <Checkbox disabled={true} label="Disabled" /> </FormGroup> </Form> ); }
Props
Prop name | Type | Default | Description |
---|---|---|---|
text * | string |
| Description to display below |
link | CheckboxDescriptionLink |
| See CheckboxDescriptionLink for usage. |
Props ending with * are required
Do's and Don'ts
Do |
---|
Use Checkboxes to turn on and off settings within a form. |
Group related Checkboxes under input label (h4). |
Don't |
---|
Apply changes made with the Checkbox right away without additional save action. |