Checkbox
Sourcecomponents/Checkbox.astro
Overview
Five states — default, hover, checked, focus and disabled — on light, dark & image. Use it for independent yes/no choices; for a single-pick set use Radio.
On light
default
hover
checked
focus
disabled
On dark
default
hover
checked
focus
disabled
On image
default
hover
checked
focus
disabled
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
checked | boolean | false | Selected by default. |
disabled | boolean | false | Dims and blocks the control. |
name | string | — | Form field name. |
value | string | — | Submitted value when checked. |
surface | 'light' | 'dark' | 'light' | Dark surface treatment. |
Usage
Label goes in the slot. Each checkbox is independent — no shared name needed.
<Checkbox name="terms" value="yes">I agree to the terms</Checkbox>
<Checkbox checked>Email me updates</Checkbox>