Checkbox

A checkbox component for selecting one or multiple options.

Beer Preferences 
<Field label="Beer Preferences">
    <CheckboxGroup>
        <Checkbox defaultChecked>IPA</Checkbox>
        <Checkbox>Stout</Checkbox>
        <Checkbox title="Barrel-Aged" subtitle="Aged in oak barrels for complex flavors" />
        <Checkbox title="Seasonal Releases" subtitle="Limited edition and experimental brews" defaultChecked />
    </CheckboxGroup>
</Field>

Overview

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.

Basic Usage

Description

Checkbox can be used with or without labels, and supports standard states including disabled and error states.

With Label
With Error
Disabled 
<div className="space-y-6 max-w-sm">
  <Field label="With Label">
    <CheckboxGroup>
      <Checkbox>Pilsner</Checkbox>
      <Checkbox defaultChecked>Lager</Checkbox>
    </CheckboxGroup>
  </Field>
  
  <Field label="With Error">
    <CheckboxGroup>
      <Checkbox aria-invalid>This checkbox has an error</Checkbox>
    </CheckboxGroup>
  </Field>
  
  <Field label="Disabled">
    <CheckboxGroup>
      <Checkbox disabled>This checkbox is disabled</Checkbox>
      <Checkbox disabled defaultChecked>This is disabled and checked</Checkbox>
    </CheckboxGroup>
  </Field>
</div>

Checkbox

Description

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

Props

The Checkbox component accepts the following props:

PropTypeDefaultDescription
titlestring-The main label text for the checkbox
subtitlestring-Additional descriptive text displayed below the title
size’xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl''md’Size of the checkbox indicator
defaultCheckedbooleanfalseInitial checked state (uncontrolled)
checkedboolean-Controlled checked state
classNamestring-Additional CSS class names
childrenReactNode-Content to display as the label (used when title is not provided)

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

CheckboxGroup

Description

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

<CheckboxGroup>
    <Checkbox>IPA</Checkbox>
    <Checkbox defaultChecked>Stout</Checkbox>
    <Checkbox>Lager</Checkbox>
</CheckboxGroup>

Props

The CheckboxGroup component accepts the following props:

PropTypeDefaultDescription
horizontalbooleanfalseDisplay checkboxes in a horizontal row instead of vertical column
classNamestring-Additional CSS class names for custom layout
childrenReactNode-Checkbox components to display

Horizontal Layout

Horizontal Checkboxes

Display checkboxes in a horizontal row using the horizontal prop.

Hop Varieties 
<Field label="Hop Varieties">
    <CheckboxGroup horizontal>
        <Checkbox>Citra</Checkbox>
        <Checkbox defaultChecked>Mosaic</Checkbox>
        <Checkbox>Cascade</Checkbox>
    </CheckboxGroup>
</Field>

Sizes

Different Checkbox Sizes

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

Craft Beer Package Sizes 
<Field label="Craft Beer Package Sizes">
    <CheckboxGroup>
        <Checkbox size="xs">Nip</Checkbox>
        <Checkbox size="sm">Sleek</Checkbox>
        <Checkbox size="md" defaultChecked>Tallboy</Checkbox>
        <Checkbox size="lg">Bomber</Checkbox>
        <Checkbox size="xl">Crowler</Checkbox>
    </CheckboxGroup>
</Field>

Labels and Subtitles

Different Labeling Options

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

Brewery Features 
<Field label="Brewery Features">
    <CheckboxGroup>
        <Checkbox>Taproom</Checkbox>
        <Checkbox title="Outdoor Seating" />
        <Checkbox 
            title="Flight Options" 
            subtitle="Sample multiple beers in smaller portions" 
        />
        <Checkbox 
            title="Seasonal Releases" 
            subtitle="Limited edition and experimental brews" 
            defaultChecked 
        />
    </CheckboxGroup>
</Field>

Horizontal with Subtitles

Horizontal Layout with Descriptions

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

Brewing Methods 
<Field label="Brewing Methods">
    <CheckboxGroup horizontal className="gap-6">
        <Checkbox title="Barrel-Aged" />
        <Checkbox 
            title="Dry-Hopped" 
            subtitle="Enhanced hop aroma and flavor" 
            defaultChecked 
        />
        <Checkbox 
            title="Sour Mash" 
            subtitle="Traditional acidic fermentation" 
        />
    </CheckboxGroup>
</Field>

Accessibility

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