Checkbox

The Checkbox component provides a way for users to select one or multiple options from a set. It supports various sizes, labels, and subtitles for additional context. Checkboxes are typically used in forms or settings where users need to toggle options on or off.

Description

A flexible checkbox component that can be used individually or within a CheckboxGroup for managing multiple options.

Usage

import { Checkbox, CheckboxGroup, Field } from "@crafted-ui/react";

<Field>
    <CheckboxGroup>
        <Checkbox>IPA</Checkbox>
        <Checkbox defaultChecked>Stout</Checkbox>
        <Checkbox>Pilsner</Checkbox>
    </CheckboxGroup>
</Field>

Props

The Checkbox component accepts the following props:

Prop	Type	Default	Description
title	string	undefined	The main label text for the checkbox
subtitle	string	undefined	Additional descriptive text displayed below the title
size	’xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl'	'md’	Size of the checkbox indicator
defaultChecked	boolean	false	Initial checked state (uncontrolled)
checked	boolean	undefined	Controlled checked state
className	string	undefined	Additional CSS class names
children	ReactNode	undefined	Content to display as the label (used when title is not provided)

The component also accepts all standard HTML input attributes for checkboxes.

Description

A container component for organizing multiple checkboxes with consistent spacing and layout.

Usage

import { CheckboxGroup, Checkbox } from "@crafted-ui/react";

<CheckboxGroup>
    <Checkbox>Option 1</Checkbox>
    <Checkbox>Option 2</Checkbox>
    <Checkbox>Option 3</Checkbox>
</CheckboxGroup>

Props

The CheckboxGroup component accepts the following props:

Prop	Type	Default	Description
horizontal	boolean	false	Display checkboxes in a horizontal row instead of vertical column
className	string	undefined	Additional CSS class names for custom layout
children	ReactNode	undefined	Checkbox components to display

Simple Checkboxes

Create a group of checkboxes for selecting beer styles.

Horizontal Checkboxes

Display checkboxes in a horizontal row using the horizontal prop.

Different Checkbox Sizes

Checkboxes support five size variants: xs, sm, md, lg, and xl.

Different Labeling Options

Checkboxes can use children as labels, or use the title and subtitle props for more complex labeling.

Horizontal Layout with Descriptions

Combine horizontal layout with subtitles for compact, informative checkbox groups.

The Checkbox component follows accessibility best practices:

• Uses semantic HTML with proper label associations
• Supports keyboard navigation (Space to toggle)
• Maintains proper focus styles for keyboard users
• Provides visual feedback for checked/unchecked states
• Ensures sufficient color contrast for the checkbox indicator

When implementing checkboxes, ensure that:

1. Labels clearly describe what the checkbox controls
2. Related checkboxes are grouped using CheckboxGroup
3. Subtitles provide additional context when needed
4. Form validation messages are clearly associated with checkbox groups

Single Checkbox

<Checkbox>Accept terms and conditions</Checkbox>

Controlled Checkbox

const [checked, setChecked] = useState(false);

<Checkbox 
    checked={checked} 
    onChange={(e) => setChecked(e.target.checked)}
>
    Subscribe to newsletter
</Checkbox>

Checkbox with Detailed Description

<Checkbox 
    title="Marketing Communications" 
    subtitle="Receive updates about new products and special offers"
/>

Custom Styled Group

<CheckboxGroup className="grid grid-cols-2 gap-4">
    <Checkbox>Option 1</Checkbox>
    <Checkbox>Option 2</Checkbox>
    <Checkbox>Option 3</Checkbox>
    <Checkbox>Option 4</Checkbox>
</CheckboxGroup>