Introduction
Installation
Next.jsViteLaravelReact RouterRemixAstroTanStack StartTanStack RouterManual InstallationMCP
All componentsTheme
FieldFormInputText FieldTextareaSearch FieldInput OTPNumber FieldNumber FormatSliderCheckboxSwitchRadioSelectCombo BoxList BoxChoice BoxMulti SelectToken FieldNewTag FieldTag GroupCalendarDate FieldDate PickerDate Range PickerRange CalendarTime FieldColor PickerColor FieldColor AreaColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrop ZoneFile Trigger
ButtonButton GroupToggleToggle GroupPreskok Auth Button
EditorHeadingLinkTextKeyboard
CardContainerGrid ListResizableTableTreeSeparatorDescription ListScroll AreaShow MoreToolbar
BreadcrumbsNavbarPaginationTabsSidebar
DialogModalDrawerPopoverPreview TriggerNewSheetTooltipContext MenuDropdownCommandCommand MenuDisclosureMenu
ToastProgress BarProgress CircleMeterLoaderSkeletonNoteBadge
Chart (helpers)Area ChartBar ChartLine ChartPie ChartExperimental ChartsNewExperimental Radial ChartNewExperimental Radar ChartNewBar ListTracker
Async ImageAvatarCarouselPreskok Icon
Forms

Choice Box

Grid or stacked option selector with single or multiple selection modes.

View as MarkdownAsk ChatGPT

Installation

npx shadcn@latest add @preskok/choice-box

Usage

import {
  ChoiceBox,
  ChoiceBoxDescription,
  ChoiceBoxItem,
  ChoiceBoxLabel,
} from "@/components/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.

PropTypeDefaultDescription
columns1 | 2 | 3 | 4 | 5 | 61Number of columns for grid layout
gap0 | 1 | 2 | 3 | 4 | 5 | 60Gap between items
selectionMode"single" | "multiple""single"Selection mode
isReadOnlybooleanfalseWhether the choice box is read-only
classNamestring-Additional CSS classes

All standard GridList props from React Aria Components are also supported.

ChoiceBoxItem

An individual choice item within the choice box.

PropTypeDefaultDescription
labelstring-Label text for the item
descriptionstring-Description text displayed below the label
classNamestring-Additional CSS classes

All standard GridListItem props from React Aria Components are also supported.

ChoiceBoxLabel

The label text component for choice items.

PropTypeDefaultDescription
classNamestring-Additional CSS classes

All standard Text props from React Aria Components are also supported.

ChoiceBoxDescription

The description text component for choice items.

PropTypeDefaultDescription
classNamestring-Additional CSS classes

All standard Text props from React Aria Components are also supported.

Examples

List Box

Present and select from a list of options with labels, descriptions, and sections.

Multi Select

A multi-select component with search and filtering capabilities.

On this page

Installation
Usage
Components
ChoiceBox
ChoiceBoxItem
ChoiceBoxLabel
ChoiceBoxDescription
Examples
StarterSimple workflows for one project.
GrowthShared automation and team analytics.
EnterpriseSSO, audit logs, and custom limits.
AnalyticsWeekly reports and cohort breakdowns.
Priority supportPrivate escalation queue with four-hour SLA.
Security reviewLocked while procurement is pending.
StarterSimple workflows for one project.
GrowthShared automation and team analytics.
EnterpriseSSO, audit logs, and custom limits.
AnalyticsWeekly reports and cohort breakdowns.
Priority supportPrivate escalation queue with four-hour SLA.
Security reviewLocked while procurement is pending.