Checkbox
A checkbox turns one option on or off. A group of them lets people pick any number of options. For a single choice out of several, use a radio. For a setting that applies at once, use a switch.
Usage
<script lang="ts">
import { Checkbox } from 'noph-ui'
</script>
<Checkbox aria-label="Unchecked" />
<Checkbox aria-label="Checked" checked />
<Checkbox aria-label="Indeterminate" indeterminate />
Disabled
<script lang="ts">
import { Checkbox } from 'noph-ui'
</script>
<Checkbox aria-label="Unchecked" disabled />
<Checkbox aria-label="Checked" disabled checked />
<Checkbox aria-label="Indeterminate" disabled indeterminate />
Error
<script lang="ts">
import { Checkbox } from 'noph-ui'
</script>
<Checkbox aria-label="Unchecked" issues={[{ message: 'Required' }]} />
<Checkbox aria-label="Checked" checked issues={[{ message: 'Required' }]} />
<Checkbox aria-label="Indeterminate" indeterminate issues={[{ message: 'Required' }]} />
issues has the shape of a SvelteKit remote form's field issues. Pass a field's issues() to drive the error state.
Label
<script lang="ts">
import { Checkbox } from 'noph-ui'
</script>
<label style="display: flex; align-items: center"><Checkbox />Checkbox one</label>
<label style="display: flex; align-items: center"><Checkbox />Checkbox two</label>
Theming
| Token | Default value |
|---|---|
--np-checkbox-container-shape | 2px |
--np-checkbox-outline-color | --np-color-on-surface-variant |
--np-checkbox-selected-container-color | --np-color-primary |
--np-checkbox-selected-icon-color | --np-color-on-primary |
--np-checkbox-margin | max(0px, (48px - 18px) / 2) |
--np-checkbox-margin grows the 18dp box into a 48dp touch target. Only shrink it where
the checkbox already sits inside a large enough target, such as a list item.
The hover state layer is --np-color-primary while the box is checked or
indeterminate, and --np-color-on-surface otherwise. The press ripple uses the other color,
as in the Material 3 states.
Example
<script lang="ts">
import { Checkbox } from 'noph-ui'
</script>
<Checkbox
checked
aria-label="Themed checkbox"
--np-checkbox-container-shape="10px"
--np-checkbox-outline-color="var(--np-color-tertiary)"
--np-checkbox-selected-container-color="var(--np-color-error)"
--np-checkbox-selected-icon-color="var(--np-color-on-error)"
/>
Accessibility
The component renders a native <input type="checkbox"> with the Material 3
drawing on top. Checked state, focus, the space key and form submission work like a native
checkbox. Enter submits the form instead of toggling.
It has no label of its own. Wrap it in a <label>, as the Label example does, or pass aria-label. The
indeterminate state reports aria-checked="mixed". issues sets aria-invalid, so assistive technology reports the error too.
API
| Attribute | Type | Default | Description |
|---|---|---|---|
issues | { message: string }[] | undefined | When non-empty, draws the checkbox in the error color and sets aria-invalid on
the input. Pass a remote form field's issues(). A disabled checkbox keeps its
disabled styling instead. |
...attributes | Omit<HTMLInputAttributes, 'type'> |
Bindables
| Attribute | Type | Description |
|---|---|---|
indeterminate | boolean | null | undefined | Input property |
checked | boolean | null | undefined | Input property |
group | (string | number)[] | null | Input property |
element | HTMLElement | The root DOM element of the component, bound with bind:this. |