Choice Box

RAC
Loading...

Installation

Install the component via the CLI in one command.

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.

checkbox

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components @heroicons/react tailwind-merge tailwind-variants

Anatomy

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>

Examples

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.

Loading...

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.

Loading...

Icons

You can add icons to the Choicebox items by providing the icon prop.

Loading...

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.

Loading...

Disabled

Disable the entire Choicebox by applying the isDisabled prop.

Loading...

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.

classNamestring
columns"1" | "2" | "3" | "4" | "5" | "6"
Default: 1
gap"0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12"
Default: 0
isReadOnlyboolean

ChoiceBoxDescription

ChoiceBoxDescription extends the React Aria Components <Text> component.

classNamestring

ChoiceBoxItem

ChoiceBoxItem extends the React Aria Components <GridListItem> component.

classNamestring
descriptionstring
labelstring

ChoiceBoxLabel

ChoiceBoxLabel extends the React Aria Components <Text> component.

classNamestring

See the React Aria for the full API reference.

Design
Autocomplete
Dropdown