Checkbox

The Checkbox component is a customizable form control that allows users to select one or multiple options. It supports various states, sizes, and includes accessibility features out of the box.

Import

import { Checkbox } from 'rebel-ui';

Usage

Basic Checkbox

<Checkbox
    label="Basic checkbox"
    bind:checked
/>

Checkbox Sizes

The Checkbox component comes in three sizes: sm, md, and lg.

<Checkbox size="sm" label="Small checkbox" />
<Checkbox size="md" label="Medium checkbox" />
<Checkbox size="lg" label="Large checkbox" />

States

Checkboxes can be checked, unchecked, or indeterminate. They also support disabled and error states.

<Checkbox label="Checked checkbox" checked />
<Checkbox label="Unchecked checkbox" />
<Checkbox label="Indeterminate checkbox" indeterminate />
<Checkbox label="Disabled checkbox" disabled />
<Checkbox label="Error state" error="This field is required" />

Required Fields

Checkboxes can be marked as required for form validation.

<Checkbox
    label="I agree to the terms and conditions"
    required
/>

With Custom Name and Value

When used in forms, you can specify custom name and value attributes.

<Checkbox
    name="newsletter"
    value="subscribe"
    label="Subscribe to newsletter"
/>

Accessibility

The Checkbox component includes proper ARIA attributes and keyboard navigation support. You can provide a custom ariaLabel when the visual label is not sufficient.

<Checkbox
    label="Accept terms"
    ariaLabel="Accept terms and conditions"
/>

Props

Prop	Type	Default	Description
checked	boolean	false	The checked state of the checkbox
label	string	''	Text label for the checkbox
disabled	boolean	false	Whether the checkbox is disabled
required	boolean	false	Whether the checkbox is required
name	string	''	Name attribute for form submission
value	string	''	Value attribute for form submission
size	'sm' \| 'md' \| 'lg'	'md'	Size of the checkbox
error	string	''	Error message to display
indeterminate	boolean	false	Whether the checkbox is in an indeterminate state
ariaLabel	string	''	Custom aria-label for accessibility

Events

The Checkbox component forwards the native change event when the checkbox state changes.

Styling

The Checkbox component uses CSS variables for theming:

.checkbox {
    --rebel-surface: /* Checkbox background color */
    --rebel-border: /* Border color */
    --rebel-brand: /* Color when checked/indeterminate */
    --rebel-bg-light: /* Check/indeterminate icon color */
    --rebel-disabled-bg: /* Background when disabled */
    --rebel-error: /* Color for error state */
    --rebel-focus-ring: /* Focus ring color */
    --rebel-text-primary: /* Label text color */
    --rebel-ease-out: /* Animation timing function */
}