Library · Forms & CTAs

Checkbox

Simple checkbox field for use within forms and fieldsets.

Live preview — edit theme bottom-right

---
import Checkbox from "../components/primitives/forms/Checkbox.astro";
---
<Checkbox name="terms" label="I agree to the terms and conditions" checked />
<Checkbox name="newsletter" label="Subscribe to the newsletter" />

Props

Name	Type	Required	Description
`class`	`string`	—	Additional classes to apply to the checkbox field container
`id`	`string`	—	Unique identifier for the checkbox field
`name`	`string`	Yes	Name attribute for the checkbox field (required for form submission)
`label`	`string`	Yes	Label text for the checkbox field
`value`	`string`	—	Value attribute for the checkbox
`checked`	`boolean`	—	Whether the checkbox is checked by default
`disabled`	`boolean`	—	Whether the field is disabled (default: false)
`[key: string]`	`any`	—	HTML attributes

Example with all props

<Checkbox
  class="terms-checkbox"
  id="terms"
  name="terms"
  label="I agree to the terms and conditions"
  value="agreed"
  checked
  disabled={false}
  aria-describedby="terms-hint"
/>