Choice Box
A larger, more descriptive version of a radio or checkbox, with a generous tap target and room for supporting details, enhancing usability and clarity.
Basic
The Choicebox is an enhanced version of a GridList, offering users a larger tap target and additional details.
Installation
npx shadcn@latest add @intentui/choice-boxComposed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
This component comes packed with several components to enhance functionality and provide a seamless experience.
Manual installation
npm i react-aria-components @heroicons/reactAnatomy
import {
Choicebox,
ChoiceboxDescription,
ChoiceboxItem,
ChoiceboxLabel,
} from "@/components/ui/choicebox"<Choicebox aria-label="Select items" selectionMode="multiple">
<ChoiceboxItem textValue="premium">
<ChoiceboxLabel>Premium</ChoiceboxLabel>
<ChoiceboxDescription>
Advanced options for growing needs.
</ChoiceboxDescription>
</ChoiceboxItem>
<ChoiceboxItem textValue="deluxe">
<ChoiceboxLabel>Deluxe</ChoiceboxLabel>
<ChoiceboxDescription>
Top-tier features for maximum performance.
</ChoiceboxDescription>
</ChoiceboxItem>
<ChoiceboxItem textValue="ultimate">
<ChoiceboxLabel>Ultimate</ChoiceboxLabel>
<ChoiceboxDescription>
All-inclusive plan with every feature available.
</ChoiceboxDescription>
</ChoiceboxItem>
<ChoiceboxItem textValue="enterprise">
<ChoiceboxLabel>Enterprise</ChoiceboxLabel>
<ChoiceboxDescription>
Customized solutions for large organizations.
</ChoiceboxDescription>
</ChoiceboxItem>
</Choicebox>Multiple selection
By default, it uses single selection mode. To allow multiple selections, set the selectionMode prop to 'multiple'. This enables users to select more than one item at a time.
Columns and gap
By default, the gap between items is set to 0, and the columns prop is also 0. You can customize both by providing your own gap and columns values.
Icons
You can add icons to the Choicebox items by providing the icon prop.
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.
Disabled
Disable the entire Choicebox by applying the isDisabled prop.
Individual items can also be disabled by specifying their keys in the disabledKeys prop.
<Choicebox disabledKeys={['sm', 'lg']} />