Checkbox
A Checkbox is one yes or no answer saved with the form, such as accepting terms. A CheckboxGroup is several independent choices under one label.
- Checkbox
- CheckboxGroup
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Checkbox
Notify me about
When someone asks you to look at a change.
Sent to your email.
Accept the terms to continue.
Dark theme, Checkbox
Notify me about
When someone asks you to look at a change.
Sent to your email.
Accept the terms to continue.
High contrast theme, Checkbox
Notify me about
When someone asks you to look at a change.
Sent to your email.
Accept the terms to continue.
UsageLink to the section Usage
import { Checkbox, CheckboxGroup } from '@skribly/ui/forms'<CheckboxGroup label="Notify me about" defaultValue={['mentions']}>
<Checkbox value="mentions">Mentions</Checkbox>
<Checkbox value="reviews">Review requests</Checkbox>
</CheckboxGroup>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Space toggles; the label is part of the target, so the row clears 24px.
- Checked shows a tick and indeterminate shows a dash, both kept in forced colours.
- A group has one label, one description and one error for the set.
This demo runs through axe in all three themes on every test run. See what the tests check.