Checkbox Component

The Checkbox component creates interactive form controls that work for both checkboxes and radio buttons. It includes built-in label support, multiple styling variants, and comprehensive accessibility features.

Key Features

• Dual Functionality: Works as both checkbox and radio button

• Smart Styling: Multiple variants with hover and focus states

• Label Integration: Built-in label support with required field indication

• State Management: Supports various states including error handling

Variants

Choose from three distinct styling variants:

Variant Use Cases

• Default: Standard form controls and general usage
• Destructive: Actions requiring caution or confirmation
• Outline: When you need a more prominent selection area or want to emphasize the entire option

Component States

The component supports various interactive states:

Implementation

Basic Checkbox

Create simple checkbox inputs with labels:

1
<Checkbox value="terms" name="terms" required>
2
    Accept terms and conditions
3
</Checkbox>
4

5
<Checkbox variant="destructive" value="delete" name="delete">
6
  Delete account
7
</Checkbox>

Radio Button Groups

Use the component in radio button mode:

1
<RadioGroup title="Choose your favorite fruit" titleClass="text-lg mb-2">
2
    <Checkbox type="radio" name="fruit" value="apple">Apple</Checkbox>
3
    <Checkbox type="radio" name="fruit" value="banana">Banana</Checkbox>
4
    <Checkbox type="radio" name="fruit" value="cherry">Cherry</Checkbox>
5
</RadioGroup>

Checkbox Component Props API

Custom Event Listeners

The checkbox component emits a custom event that you can listen to:

Waiting for events… (Interact with the checkbox to see events)

1
const checkbox = document.querySelector('checkbox-wrapper');
2
checkbox?.addEventListener(CheckboxEventNames.Change, (e) => {
3
  console.log(e.detail.checked);
4
});

Accessibility Features

• Automatic ID generation for label association

• Proper focus states and indicators

• Screen reader compatibility

• Keyboard navigation support

• Required field indication

• Error state handling

• ARIA attributes

Best Practices

1. Label Usage

   • Use clear, concise labels
   • Indicate required fields
   • Maintain consistent terminology
   • Consider label length

2. Grouping

   • Group related checkboxes
   • Use fieldsets for radio groups
   • Provide clear group labels
   • Maintain logical order

3. Visual Design

   • Ensure adequate spacing
   • Maintain clear hierarchy
   • Use consistent sizing
   • Consider mobile touch targets

Common Applications