Checkbox

Basic Usage

Preview

Accept terms and conditions

Default checked

Indeterminate state

Code

---
import Checkbox from '@uicg/cli/components/Checkbox/checkbox.astro'
---

<Checkbox label="Accept terms and conditions" />
<Checkbox checked label="Default checked" />
<Checkbox indeterminate label="Indeterminate state" />

Intent Variants

Preview

Default checkbox

Primary checkbox

Success checkbox

Warning checkbox

Danger checkbox

Code

<Checkbox intent="default" label="Default checkbox" checked />
<Checkbox intent="primary" checked label="Primary checkbox" />
<Checkbox intent="success" checked label="Success checkbox" />
<Checkbox intent="warning" checked label="Warning checkbox" />
<Checkbox intent="danger" checked label="Danger checkbox" />

Sizes

Small checkbox

Compact size for dense interfaces

Medium checkbox

Default size for most applications

Large checkbox

Larger size for touch interfaces or prominence

States

Unchecked state

Default state when not selected

Checked state

Active/selected state

Indeterminate state

Partially selected state, often used in tree structures

Required checkbox *

Must be checked to proceed

Disabled unchecked

Cannot be interacted with

Disabled checked

Locked in checked state

Form Integration

Account Preferences

Customize your account settings

Email notifications

Receive updates via email

SMS notifications

Receive updates via SMS

Newsletter subscription

Get our weekly newsletter

Data sharing

Allow sharing of anonymized data for research

Account Deletion

This action cannot be undone

I understand this action is permanent *

Confirm you understand the consequences

I have backed up my important data *

Ensure you have saved any important information

Properties

Property	Type	Default	Description
checked	boolean	false	Whether the checkbox is checked
indeterminate	boolean	false	Whether the checkbox is in an indeterminate state
disabled	boolean	false	Whether the checkbox is disabled
required	boolean	false	Whether the checkbox is required (shows asterisk)
size	'small' | 'medium' | 'large'	'medium'	Size variant of the checkbox
intent	'default' | 'primary' | 'success' | 'warning' | 'danger'	'default'	Visual intent/state of the checkbox
label	string	-	Label text for the checkbox
description	string	-	Description text below the label
name	string	-	Name attribute for form submission
value	string	-	Value attribute for form submission
id	string	auto-generated	Unique identifier for the checkbox
class	string	-	Additional CSS classes to apply

Accessibility

The Checkbox component follows WCAG 2.1 AA guidelines:

Screen Reader Support

• Semantic HTML: Uses native <input type="checkbox"> for proper identification
• Label Association: Proper for attribute linking labels to inputs
• Description Support: Uses aria-describedby for additional context
• State Announcement: Screen readers announce checked/unchecked states
• Required Indication: Both visual and semantic indication of required fields

Keyboard Navigation

• Space Key: Toggles the checkbox state
• Tab Navigation: Focuses the checkbox in tab order
• Focus Indicators: Clear visual focus rings for keyboard users

Visual Accessibility

• High Contrast: Meets WCAG contrast requirements in all color variants
• Touch Targets: Minimum 44x44px touch target size (large variant)
• Color Independence: State is indicated by shape/icon, not just color
• Motion Sensitivity: Smooth but not excessive transitions

State Communication

• Indeterminate State: Properly communicated to assistive technology
• Disabled State: Prevents interaction and announces disability
• Error States: Uses aria-invalid for validation feedback

Examples

Terms and Conditions

I agree to the Terms and Conditions *

By checking this box, you acknowledge that you have read and agree to our terms of service.

Newsletter Subscription with Options

Newsletter Preferences

Choose how you'd like to hear from us

Weekly newsletter

Get our curated content every Monday

Monthly digest

A summary of the month's highlights

Breaking news alerts

Immediate notifications for urgent updates

Multi-level Selection

Select all features

Choose individual features below

Advanced analytics

Detailed reporting and insights

Team collaboration

Share projects with team members

Custom branding

Use your own logos and colors

Error Validation

Confirm account deletion *

This action cannot be undone

Email verified

Your email address has been confirmed

<!-- Basic Usage -->
<Checkbox label="Subscribe to newsletter" />

<!-- With Description -->
<Checkbox
  label="Enable notifications"
  description="Get alerts when new content is available"
/>

<!-- Different States -->
<Checkbox checked label="Already selected" />
<Checkbox indeterminate label="Partially selected" />
<Checkbox disabled label="Cannot be changed" />

<!-- Intent Variants -->
<Checkbox intent="success" checked label="Completed task" />
<Checkbox intent="danger" required label="Confirm deletion" />

<!-- Form Integration -->
<Checkbox
  name="preferences"
  value="email_notifications"
  label="Email notifications"
  required
/>

<!-- Sizes -->
<Checkbox size="small" label="Compact checkbox" />
<Checkbox size="large" label="Large touch target" />