import { Checkbox } from "@meowerse/ui"; · source packages/ui/src/components/Checkbox.tsx
variants and states
uncheckedcheckeddisabled
props
prop
type
default
required
label
string the visible label; clicking it toggles the checkbox.
—
yes
…plus all InputHTMLAttributes<HTMLInputElement>.
css custom properties
variable
dark
light
--c-accent
#00ff82
#0a6e3c
--control-height
44px
same
--disabled-opacity
0.5
same
--fs-3
0.875rem
same
--sp-2
8px
same
Classes: .mw-check. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.
usage
unchecked
tsx
import { Checkbox } from "@meowerse/ui";
<Checkbox label="remember this device" />
html (needs @meowerse/ui/tokens.css)
<label for="_R_0_" class="mw-check"><input id="_R_0_" type="checkbox"/><span>remember this device</span></label>
checked
tsx
import { Checkbox } from "@meowerse/ui";
<Checkbox label="keep me signed in" defaultChecked />
html (needs @meowerse/ui/tokens.css)
<label for="_R_0_" class="mw-check"><input id="_R_0_" type="checkbox" checked=""/><span>keep me signed in</span></label>
disabled
tsx
import { Checkbox } from "@meowerse/ui";
<Checkbox label="sync across devices (not available yet)" disabled />
html (needs @meowerse/ui/tokens.css)
<label for="_R_0_" class="mw-check"><input id="_R_0_" type="checkbox" disabled=""/><span>sync across devices (not available yet)</span></label>
accessibility
A native checkbox tied to its label: clicking the text toggles it.
Space toggles it; focus shows the ring.
key
does
Tab
focuses it
Space
toggles it
do and don't
[ ok ] do
Word the label as the thing that becomes true when checked.
[fail] don't
Don't use a checkbox for an action that happens at once; use a button.