Forms · astro-ui · Checkbox
Checkbox
Native checkbox with custom visual, indeterminate state, and label.
Checkbox styles the native input inside a label wrapper — square or rounded indicator, indeterminate support, and full native keyboard/announcement behavior.
Features
- Native input + custom visual (real form value)
- square / rounded indicator shapes
- indeterminate state
- 5 sizes, 9 color variants
- label prop or slot content
- horizontal / vertical orientation
Usage
---
import { Checkbox } from "astro-ui";
---
<Checkbox name="news" checked>Email me news</Checkbox>Demos
Basic
<Checkbox name="news" checked>Email me news</Checkbox>
<Checkbox name="sms" disabled>SMS (unavailable)</Checkbox>
<Checkbox name="promo" indeterminate label="Promo" />Variants & shapes
<Checkbox shape="rounded" checked label="Rounded" />
<Checkbox variant="success" checked label="Success" />API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name / value | string | — | Native form fields. |
checked | boolean | false | Initial state (SSR-safe). |
indeterminate | boolean | false | Dash state. |
shape | "square" | "rounded" | "square" | Indicator shape. |
orientation | "horizontal" | "vertical" | "horizontal" | Label layout. |
label | string | — | Text when no slot content. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Scale. |
variant | "primary" | "secondary" | "muted" | "destructive" | "success" | "warning" | "info" | "inherit" | "primary" | Accent color. |
class | string | — | Merged via cn(); Tailwind classes welcome. |
id | string | — | Element id. |
ariaLabel | string | — | Accessible name. |
Accessibility
Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.
- Native
<input type="checkbox">— checked state, Space toggle, and form value from the platform aria-invalid+aria-describedbyconnect validation and hint text- Decorative marks are
aria-hidden;:focus-visiblering
FAQ
Does indeterminate submit a value?
No — it's purely visual (like the platform). The form value follows the underlying checked state only.
Changelog
Version history mentioning Checkbox.
v0.1.0 — 2026-11-11
added
- Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.