Selection controls

Overview

Selection controls are interactive components that let users choose between different options or toggle states. The three main types serve different purposes:

• Checkbox - Select multiple options from a set
• Radio button - Choose one option from a set
• Toggle - Switch between two states (on/off)

When to use each type

Checkboxes

Use checkboxes when users can select zero, one, or multiple options from a list.

Best for:

• Selecting multiple items
• Opting in or out of preferences
• Filtering content with multiple criteria

Example use cases:

• “Select multiple data sources in a list table to delete”
• “Choose notification preferences”
• “Filter by: Active, Inactive, Pending (in a dropdown)“

Radio buttons

Use radio buttons when users must select exactly one option from a set of mutually exclusive choices.

Best for:

• Selecting a single option from 2-5 choices
• Mutually exclusive options where one must be chosen
• Settings where only one option can be active
• When all options should be visible at once

Example use cases:

• “Payment frequency: Monthly / Yearly”
• “Select access rights”

Important: For more than 5 options, consider using a single select dropdown instead.

Toggles

Use toggles for immediate binary actions that switch between two states (on/off, enabled/disabled).

Best for:

• Turning a feature on or off instantly
• Enabling or disabling a setting
• Actions that take effect immediately
• When the two states are opposites (on/off, show/hide, enable/disable)

Example use cases:

• “Enable two-factor authentication”
• “Show archived items”
• “Auto-save enabled”

Key difference from checkbox: Toggles apply changes immediately, while checkboxes typically require a “Save” or “Submit” action.

Quick comparison

Best practices

General guidelines

• Group related options together with clear headings
• Provide clear labels that explain what each option does
• Use vertical layout for better scannability (especially for radio buttons and checkboxes)
• Align inputs to the left of labels for better accessibility
• Maintain consistent spacing between options using gap-sm

Accessibility

• Always associate labels with inputs using htmlFor attribute
• Ensure inputs are keyboard accessible (Tab to navigate, Space to toggle)
• Provide sufficient color contrast for all states
• Use aria attributes when grouping related controls
• Test with screen readers to ensure proper announcements

Visual design

• Keep inputs aligned vertically for easy scanning
• Use consistent spacing between options
• Add descriptive text below labels when options need clarification
• Group related options with visual hierarchy
• Show clear visual feedback for hover, focus, and selected states

When not to use selection controls

Consider alternative components when:

• Many options (6+): Use a select dropdown or multi-select
• Filtering many items: Use chips for better visual organization
• Complex selections: Use a field picker for structured data
• Simple yes/no questions: Sometimes a simple button or link is clearer than a selection control

Related components

• Chips - For filtering and quick selections
• Single select - For dropdown selections from many options
• Multi select - For selecting multiple items from a long list
• Button group - For mutually exclusive actions or view modes