Choicebox

A bigger, juiced-up version of a Radio or Checkbox, giving users a chunky tap target and extra deets.

Basic

The Choicebox is an enhanced version of a Radio or Checkbox, offering users a larger tap target and additional details.

Just the essentials to get started.
A step up with more features and support.
Advanced options for growing needs.
Top-tier features for maximum performance.
All-inclusive plan with every feature available.
Custom solutions for large-scale operations.

Installation

In the terminal, run the following command to begin:
npx hq-kit add choicebox

Single Selection

Although the Choicebox defaults to allowing multiple selections, it can be configured for single selection by setting the selectionMode prop.

Perfect for beginners. Basic resources for light projects.
Great for growing sites. More power and storage.
Ideal for busy sites. Lots of resources and support.
Max power for demanding applications. Top-tier performance.

Columns and Gap

The default layout for the Choicebox includes two columns with a 16px gap between items. These settings can be adjusted by passing the columns and gap props.

Essentials, get started
More features, support
Advanced, growing needs
Top-tier, maximum performance
All-inclusive, every feature
Custom, large-scale operations

Controlled

This component can function as either controlled or uncontrolled. For controlled use, provide the selectedKeys prop and manage updates with the onSelectionChange event handler.

Perfect for beginners. Basic resources for light projects.
Great for growing sites. More power and storage.
Ideal for busy sites. Lots of resources and support.
Max power for demanding applications. Top-tier performance.
You have selected: sm

Disabled

Disable the entire Choicebox by applying the isDisabled prop.

Perfect for beginners. Basic resources for light projects.
Great for growing sites. More power and storage.
Ideal for busy sites. Lots of resources and support.
Max power for demanding applications. Top-tier performance.

Individual items can also be disabled by specifying their keys in the disabledKeys prop.

<Choicebox disabledKeys={['sm', 'lg']} />
Grid ListColor Picker