Mushilu-San UI Checkbox
A native checkbox for selecting one or more independent options.
Selector: input[type=checkbox][muiCheckbox]
import { Checkbox } from '@mushilu-san/ui/forms';Loading example…
Overview
<input type="checkbox">, so it keeps the native role, checked state and Space key behaviour. Pair it with a <label> so the whole label is clickable.
invalid to show the failed-validation styling (data-invalid) and to set aria-invalid="true". Link an error message with aria-describedby.
When to use
Choosing any number of options from a list, such as notification types. Accepting a single yes/no agreement, such as terms of service.
When not to use
Choosing exactly one option from a set. Use radio buttons. Switching a setting on or off that takes effect immediately. Use a toggle. Use Toggle instead.
Examples
Sizes and invalid state
Loading example…
Guidelines
Do
Always label each checkbox with visible text. Group related checkboxes under a shared heading or a fieldset with a legend.
Don't
Do not use a checkbox for a choice that has only one option. Use a toggle for an immediate setting. Do not rely on colour alone to show the invalid state. Include an error message.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
input[type=checkbox] | checkbox (native) | invalid sets data-invalid and aria-invalid="true". |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| Space |
Give each checkbox an accessible name from its label, or with aria-labelwhen there is no visible label.
API
Checkbox
| Name | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Checkbox size: `sm`, `md` or `lg`. Default `md`. |
invalid | boolean | false | Shows the failed-validation style and sets `data-invalid`. Also sets `aria-invalid`. Accepts attribute presence, e.g. <… invalid>. |
CSS parts
::part(checkbox)
Tokens
--mui-color-primary--mui-color-border--mui-color-danger--mui-color-focus-ring--mui-touch-target