Choice Box
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/choice-box
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components @heroicons/react cn tailwind-variants
Anatomy
import {
ChoiceBox,
ChoiceBoxDescription,
ChoiceBoxItem,
ChoiceBoxLabel,
} from '@/components/ui/choice-box'<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>Examples
Multiple selection
Choice boxes use single selection by default. Set selectionMode="multiple" to allow multiple selections.
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
Add icons to choice box items with the icon prop.
Controlled
For controlled selection, pass selectedKeys and update it with onSelectionChange.
Disabled
Set isDisabled to disable the entire choice box.
Individual items can also be disabled by specifying their keys in the disabledKeys prop.
<Choicebox disabledKeys={['sm', 'lg']} />Component API
ChoiceBox
ChoiceBox extends the React Aria Components <GridList> component.
classNamestringcolumns"1" | "2" | "3" | "4" | "5" | "6"1gap"0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12"0isReadOnlybooleanChoiceBoxDescription
ChoiceBoxDescription extends the React Aria Components <Text> component.
classNamestringChoiceBoxItem
ChoiceBoxItem extends the React Aria Components <GridListItem> component.
classNamestringdescriptionstringlabelstringChoiceBoxLabel
ChoiceBoxLabel extends the React Aria Components <Text> component.
classNamestringSee the React Aria for the full API reference.
