Choicebox

Card-style radio and checkbox components for React and Next.js forms. Built with TypeScript support, Tailwind CSS styling, and shadcn/ui design for enhanced form selection interfaces with accessibility features.

Lucide

Loading component...

'use client';import { RadioGroup } from '@/components/ui/radio-group';import { cn } from '@/lib/utils';import { CircleIcon } from 'lucide-react';import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';import type { ComponentProps, HTMLAttributes } from 'react';import {  Card,  CardContent,  CardDescription,  CardHeader,  CardTitle,} from '@/components/ui/card';export type ChoiceboxProps = ComponentProps<typeof RadioGroup>;export const Choicebox = ({ className, ...props }: ChoiceboxProps) => (  <RadioGroup className={cn('w-full', className)} {...props} />);export type ChoiceboxItemProps = RadioGroupPrimitive.RadioGroupItemProps;export const ChoiceboxItem = ({  className,  children,  ...props}: ChoiceboxItemProps) => (  <RadioGroupPrimitive.Item    asChild    className={cn(      'text-left',      '[&[data-state="checked"]]:border-primary',      '[&[data-state="checked"]]:bg-primary-foreground'    )}    {...props}  >    <Card      className={cn(        'flex cursor-pointer flex-row items-start justify-between rounded-md p-4 shadow-none transition-all',        className      )}    >      {children}    </Card>  </RadioGroupPrimitive.Item>);export type ChoiceboxItemHeaderProps = ComponentProps<typeof CardHeader>;export const ChoiceboxItemHeader = ({  className,  ...props}: ComponentProps<typeof CardHeader>) => (  <CardHeader className={cn('flex-1 p-0', className)} {...props} />);export type ChoiceboxItemTitleProps = ComponentProps<typeof CardTitle>;export const ChoiceboxItemTitle = ({  className,  ...props}: ChoiceboxItemTitleProps) => (  <CardTitle    className={cn('flex items-center gap-2 text-sm', className)}    {...props}  />);export type ChoiceboxItemSubtitleProps = HTMLAttributes<HTMLSpanElement>;export const ChoiceboxItemSubtitle = ({  className,  ...props}: ChoiceboxItemSubtitleProps) => (  <span    className={cn('font-normal text-muted-foreground text-xs', className)}    {...props}  />);export type ChoiceboxItemDescriptionProps = ComponentProps<  typeof CardDescription>;export const ChoiceboxItemDescription = ({  className,  ...props}: ChoiceboxItemDescriptionProps) => (  <CardDescription className={cn('text-sm', className)} {...props} />);export type ChoiceboxItemContentProps = ComponentProps<typeof CardContent>;export const ChoiceboxItemContent = ({  className,  ...props}: ChoiceboxItemContentProps) => (  <CardContent    className={cn(      'flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border border-input p-0 text-primary shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',      className    )}    {...props}  />);export type ChoiceboxItemIndicatorProps = ComponentProps<  typeof RadioGroupPrimitive.RadioGroupIndicator>;export const ChoiceboxItemIndicator = ({  className,  ...props}: ChoiceboxItemIndicatorProps) => (  <RadioGroupPrimitive.Indicator asChild {...props}>    <CircleIcon className={cn('size-2 fill-primary', className)} />  </RadioGroupPrimitive.Indicator>);

Installation

npx shadcn@latest add https://www.shadcn.io/registry/choicebox.json

npx shadcn@latest add https://www.shadcn.io/registry/choicebox.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/choicebox.json

bunx shadcn@latest add https://www.shadcn.io/registry/choicebox.json

Features

Card-style inputs - Enhanced radio/checkbox alternatives with visual appeal using Tailwind CSS
Keyboard navigation - Full accessibility support with arrow keys and space/enter selection
Flexible layouts - Inline and block options with responsive design for Next.js forms
Custom content - Headers, titles, descriptions, and indicators with TypeScript safety
State management - Selected, hover, disabled, and focus states using shadcn/ui theming
Open source - Free React component for enhanced form interfaces

Examples

Inline Choiceboxes

Loading component...

'use client';import { RadioGroup } from '@/components/ui/radio-group';import { cn } from '@/lib/utils';import { CircleIcon } from 'lucide-react';import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';import type { ComponentProps, HTMLAttributes } from 'react';import {  Card,  CardContent,  CardDescription,  CardHeader,  CardTitle,} from '@/components/ui/card';export type ChoiceboxProps = ComponentProps<typeof RadioGroup>;export const Choicebox = ({ className, ...props }: ChoiceboxProps) => (  <RadioGroup className={cn('w-full', className)} {...props} />);export type ChoiceboxItemProps = RadioGroupPrimitive.RadioGroupItemProps;export const ChoiceboxItem = ({  className,  children,  ...props}: ChoiceboxItemProps) => (  <RadioGroupPrimitive.Item    asChild    className={cn(      'text-left',      '[&[data-state="checked"]]:border-primary',      '[&[data-state="checked"]]:bg-primary-foreground'    )}    {...props}  >    <Card      className={cn(        'flex cursor-pointer flex-row items-start justify-between rounded-md p-4 shadow-none transition-all',        className      )}    >      {children}    </Card>  </RadioGroupPrimitive.Item>);export type ChoiceboxItemHeaderProps = ComponentProps<typeof CardHeader>;export const ChoiceboxItemHeader = ({  className,  ...props}: ComponentProps<typeof CardHeader>) => (  <CardHeader className={cn('flex-1 p-0', className)} {...props} />);export type ChoiceboxItemTitleProps = ComponentProps<typeof CardTitle>;export const ChoiceboxItemTitle = ({  className,  ...props}: ChoiceboxItemTitleProps) => (  <CardTitle    className={cn('flex items-center gap-2 text-sm', className)}    {...props}  />);export type ChoiceboxItemSubtitleProps = HTMLAttributes<HTMLSpanElement>;export const ChoiceboxItemSubtitle = ({  className,  ...props}: ChoiceboxItemSubtitleProps) => (  <span    className={cn('font-normal text-muted-foreground text-xs', className)}    {...props}  />);export type ChoiceboxItemDescriptionProps = ComponentProps<  typeof CardDescription>;export const ChoiceboxItemDescription = ({  className,  ...props}: ChoiceboxItemDescriptionProps) => (  <CardDescription className={cn('text-sm', className)} {...props} />);export type ChoiceboxItemContentProps = ComponentProps<typeof CardContent>;export const ChoiceboxItemContent = ({  className,  ...props}: ChoiceboxItemContentProps) => (  <CardContent    className={cn(      'flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border border-input p-0 text-primary shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',      className    )}    {...props}  />);export type ChoiceboxItemIndicatorProps = ComponentProps<  typeof RadioGroupPrimitive.RadioGroupIndicator>;export const ChoiceboxItemIndicator = ({  className,  ...props}: ChoiceboxItemIndicatorProps) => (  <RadioGroupPrimitive.Indicator asChild {...props}>    <CircleIcon className={cn('size-2 fill-primary', className)} />  </RadioGroupPrimitive.Indicator>);

Use Cases

Forms - Settings, preferences, plan selection with enhanced UX
Surveys - Question responses with improved visual hierarchy
Configuration - Feature toggles and option selection panels
E-commerce - Product variants, shipping options, payment methods

Implementation

Uses standard radio/checkbox inputs with enhanced styling. Works with form libraries like React Hook Form. Keyboard accessible with proper ARIA labels.

Reactchoicebox