SedanComfortable family car with excellent fuel economy.
SUVVersatile vehicle with enhanced cargo space and off-road capability.
LuxuryPremium features with leather interior and advanced technology package.
ElectricZero-emission vehicle with cutting-edge battery technology.
"use client"
import {
ChoiceBox,
ChoiceBoxItem,
} from "@/components/ui/preskok-ui/choice-box"
export function ChoiceBoxPreskokDemo() {
return (
<ChoiceBox aria-label="Select car packages" selectionMode="multiple">
<ChoiceBoxItem
textValue="sedan"
label="Sedan"
description="Comfortable family car with excellent fuel economy."
/>
<ChoiceBoxItem
textValue="suv"
label="SUV"
description="Versatile vehicle with enhanced cargo space and off-road capability."
/>
<ChoiceBoxItem
textValue="luxury"
label="Luxury"
description="Premium features with leather interior and advanced technology package."
/>
<ChoiceBoxItem
textValue="electric"
label="Electric"
description="Zero-emission vehicle with cutting-edge battery technology."
/>
</ChoiceBox>
)
}
Installation
CLI
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add choice-box
Usage
import {
ChoiceBox,
ChoiceBoxDescription,
ChoiceBoxItem,
ChoiceBoxLabel,
} from "@/registry/preskok/ui/preskok-ui/choice-box"
export function ChoiceBoxExample() {
return (
<ChoiceBox aria-label="Select car packages" selectionMode="multiple">
<ChoiceBoxItem
textValue="sedan"
label="Sedan"
description="Comfortable family car with excellent fuel economy."
/>
<ChoiceBoxItem
textValue="suv"
label="SUV"
description="Versatile vehicle with enhanced cargo space and off-road capability."
/>
<ChoiceBoxItem
textValue="luxury"
label="Luxury"
description="Premium features with leather interior and advanced technology package."
/>
</ChoiceBox>
)
}Components
ChoiceBox
The root container component for the choice box.
| Prop | Type | Default | Description |
|---|---|---|---|
columns | 1 | 2 | 3 | 4 | 5 | 6 | 1 | Number of columns for grid layout |
gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 0 | Gap between items |
selectionMode | "single" | "multiple" | "single" | Selection mode |
isReadOnly | boolean | false | Whether the choice box is read-only |
className | string | - | Additional CSS classes |
All standard GridList props from React Aria Components are also supported.
ChoiceBoxItem
An individual choice item within the choice box.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Label text for the item |
description | string | - | Description text displayed below the label |
className | string | - | Additional CSS classes |
All standard GridListItem props from React Aria Components are also supported.
ChoiceBoxLabel
The label text component for choice items.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
All standard Text props from React Aria Components are also supported.
ChoiceBoxDescription
The description text component for choice items.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
All standard Text props from React Aria Components are also supported.
Examples
Single Selection
<ChoiceBox aria-label="Select plan" selectionMode="single">
<ChoiceBoxItem textValue="basic" label="Basic" />
<ChoiceBoxItem textValue="pro" label="Pro" />
<ChoiceBoxItem textValue="enterprise" label="Enterprise" />
</ChoiceBox>Multiple Selection
<ChoiceBox aria-label="Select features" selectionMode="multiple">
<ChoiceBoxItem textValue="feature1" label="Feature 1" />
<ChoiceBoxItem textValue="feature2" label="Feature 2" />
<ChoiceBoxItem textValue="feature3" label="Feature 3" />
</ChoiceBox>Grid Layout
<ChoiceBox aria-label="Select plan" columns={3} gap={4}>
<ChoiceBoxItem textValue="basic" label="Basic" />
<ChoiceBoxItem textValue="pro" label="Pro" />
<ChoiceBoxItem textValue="enterprise" label="Enterprise" />
</ChoiceBox>With Descriptions
<ChoiceBox aria-label="Select plan">
<ChoiceBoxItem
textValue="basic"
label="Basic"
description="Perfect for personal projects"
/>
<ChoiceBoxItem
textValue="pro"
label="Pro"
description="Great for small teams"
/>
</ChoiceBox>Custom Children
<ChoiceBox aria-label="Select option">
<ChoiceBoxItem textValue="option1">
<ChoiceBoxLabel>Option 1</ChoiceBoxLabel>
<ChoiceBoxDescription>Custom content here</ChoiceBoxDescription>
</ChoiceBoxItem>
</ChoiceBox>