Checkbox Group - Bellhop Design System

Examples

Interact with live examples and copy the code to use in your project.

Checkbox (Multi-Select)

Allows multiple items to be selected at once

chevron_right HTML

<bh-checkbox-group label="Select features" type="checkbox">
  <bh-checkbox-group-item
    title="Advanced Analytics"
    subtitle="$20/month"
    description="Get detailed insights into your data with custom reports"
  >
  </bh-checkbox-group-item>

  <bh-checkbox-group-item
    title="Priority Support"
    subtitle="$15/month"
    description="24/7 support with 1-hour response time guarantee"
  >
  </bh-checkbox-group-item>

  <bh-checkbox-group-item
    title="API Access"
    subtitle="$10/month"
    description="Programmatic access to all features via REST API"
  >
  </bh-checkbox-group-item>
</bh-checkbox-group>

chevron_right React

import { BhCheckboxGroup, BhCheckboxGroupItem } from '@actabldesign/bellhop-react';

function MyComponent() {
  return (
    <BhCheckboxGroup label="Select features" type="checkbox">
      <BhCheckboxGroupItem
        title="Advanced Analytics"
        subtitle="$20/month"
        description="Get detailed insights into your data with custom reports"
      />

      <BhCheckboxGroupItem
        title="Priority Support"
        subtitle="$15/month"
        description="24/7 support with 1-hour response time guarantee"
      />

      <BhCheckboxGroupItem
        title="API Access"
        subtitle="$10/month"
        description="Programmatic access to all features via REST API"
      />
    </BhCheckboxGroup>
  );
}

chevron_right Angular

<bh-checkbox-group label="Select features" type="checkbox">
  <bh-checkbox-group-item
    title="Advanced Analytics"
    subtitle="$20/month"
    description="Get detailed insights into your data with custom reports"
  >
  </bh-checkbox-group-item>

  <bh-checkbox-group-item
    title="Priority Support"
    subtitle="$15/month"
    description="24/7 support with 1-hour response time guarantee"
  >
  </bh-checkbox-group-item>

  <bh-checkbox-group-item
    title="API Access"
    subtitle="$10/month"
    description="Programmatic access to all features via REST API"
  >
  </bh-checkbox-group-item>
</bh-checkbox-group>

Radio (Single-Select)

Only one item can be selected at a time

chevron_right HTML

<bh-checkbox-group label="Choose your plan" type="radio">
  <bh-checkbox-group-item
    title="Basic plan"
    subtitle="$10/month"
    description="Includes up to 10 users, 20GB individual storage"
  >
  </bh-checkbox-group-item>

  <bh-checkbox-group-item
    title="Business plan"
    subtitle="$20/month"
    description="Includes up to 20 users, 40GB individual storage"
  >
  </bh-checkbox-group-item>

  <bh-checkbox-group-item
    title="Enterprise plan"
    subtitle="Custom pricing"
    description="Unlimited users, unlimited data and priority support"
  >
  </bh-checkbox-group-item>
</bh-checkbox-group>

chevron_right React

import { BhCheckboxGroup, BhCheckboxGroupItem } from '@actabldesign/bellhop-react';

function MyComponent() {
  return (
    <BhCheckboxGroup label="Choose your plan" type="radio">
      <BhCheckboxGroupItem
        title="Basic plan"
        subtitle="$10/month"
        description="Includes up to 10 users, 20GB individual storage"
      />

      <BhCheckboxGroupItem
        title="Business plan"
        subtitle="$20/month"
        description="Includes up to 20 users, 40GB individual storage"
      />

      <BhCheckboxGroupItem
        title="Enterprise plan"
        subtitle="Custom pricing"
        description="Unlimited users, unlimited data and priority support"
      />
    </BhCheckboxGroup>
  );
}

Icon Simple (Single-Select)

Single-select with featured icon on the left

chevron_right HTML

<bh-checkbox-group label="Select payment method" type="icon-simple">
  <bh-checkbox-group-item
    title="Credit Card"
    description="Pay with Visa, Mastercard, or American Express"
    icon="credit_card"
  >
  </bh-checkbox-group-item>

  <bh-checkbox-group-item
    title="PayPal"
    description="Fast and secure payment through your PayPal account"
    icon="account_balance_wallet"
  >
  </bh-checkbox-group-item>

  <bh-checkbox-group-item
    title="Bank Transfer"
    description="Direct transfer from your bank account"
    icon="account_balance"
  >
  </bh-checkbox-group-item>
</bh-checkbox-group>

chevron_right React

import { BhCheckboxGroup, BhCheckboxGroupItem } from '@actabldesign/bellhop-react';

function MyComponent() {
  return (
    <BhCheckboxGroup label="Select payment method" type="icon-simple">
      <BhCheckboxGroupItem
        title="Credit Card"
        description="Pay with Visa, Mastercard, or American Express"
        icon="credit_card"
      />

      <BhCheckboxGroupItem
        title="PayPal"
        description="Fast and secure payment through your PayPal account"
        icon="account_balance_wallet"
      />

      <BhCheckboxGroupItem
        title="Bank Transfer"
        description="Direct transfer from your bank account"
        icon="account_balance"
      />
    </BhCheckboxGroup>
  );
}

When to use

Plan Selection

Choose subscription plans or pricing tiers with detailed feature descriptions.

Feature Selection

Pick add-ons, modules, or features with explanatory text.

Settings Configuration

Configure preferences where each option needs context or explanation.

When not to use

When only one option should be selectable—use radio buttons instead
For binary on/off settings—use toggle switches
When selections need immediate effect—consider using toggles with clear feedback
For very long lists (15+)—use a multi-select dropdown for better space efficiency

Type Variants

Three variants for different selection behaviors and visual styles.

Checkbox (Multi-Select)

Allows multiple items to be selected at once. Use this when users can choose multiple options simultaneously, such as selecting add-on features or configuring multiple preferences.

Radio (Single-Select)

Only one item can be selected at a time. Use this when users must choose exactly one option from a set of mutually exclusive choices, such as pricing plans or account types.

Icon Simple (Single-Select)

Single-select with featured icon on the left. This variant displays a Material Symbol icon alongside the title, making it ideal for visually distinct options like payment methods or shipping options.

Anatomy

Each item in the group can include multiple content elements.

Title
Primary label for the option (required)
Subtitle
Secondary text displayed inline with title (optional)
Description
Detailed explanation below the title (optional)
Icon
Material Symbol icon for icon-simple variant (optional)
Control
Checkbox or radio button for selection (automatic)

Best Practices

Do

Use descriptive titles that clearly identify each option
Provide helpful descriptions for complex choices
Use radio type when only one selection is allowed
Use checkbox type when multiple selections are allowed
Keep option count between 2-6 items
Use icon-simple for visually distinct feature selection

Don't

Don't use for simple yes/no choices (use single checkbox)
Don't include too many options (> 6 items)
Don't mix checkbox and radio types in same group
Don't use vague or unclear titles
Don't omit descriptions when choices need explanation

Accessibility

Keyboard Navigation

Tab - Navigate between items
Space - Toggle selection for focused item
Arrow Up/Down - Move focus between items (radio type)
All items are keyboard accessible

Screen Reader

Group role identifies the collection
Item titles and descriptions are announced
Selection state is communicated
Required state is indicated if applicable
Disabled items are announced as unavailable

Visual Design

Clear focus indicators for keyboard users
Sufficient color contrast for all text
Selected state is visually distinct
Hover states provide feedback
Adequate spacing between items

Related Components

Components that provide similar or complementary functionality.

Component	Usage
Button	Often used together for triggering actions and interactions.
Modal	Consider for more complex interactions requiring user focus.
Card	Use for grouping and organizing related content.
Dropdown	Alternative for presenting options in a compact space.

Resources

Design and development resources for the Checkbox Group component.

Figma

Available

View in Figma →

Web Components/Angular

Available

View in Storybook →

React

Available

View in Storybook →