Choicebox

Choiceboxes are a great way to show radio or checkbox options with a card style.

Installation

npx love-ui@latest add choicebox

Usage

import { Choicebox, ChoiceboxItem, ChoiceboxItemHeader, ChoiceboxItemTitle, ChoiceboxItemSubtitle, ChoiceboxItemDescription, ChoiceboxIndicator } from "@/components/choicebox"

<Choicebox defaultValue="option1">
  <ChoiceboxItem value="option1">
    <ChoiceboxItemHeader>
      <ChoiceboxItemTitle>Option 1</ChoiceboxItemTitle>
      <ChoiceboxItemSubtitle>Subtitle</ChoiceboxItemSubtitle>
    </ChoiceboxItemHeader>
    <ChoiceboxItemDescription>Description for option 1</ChoiceboxItemDescription>
    <ChoiceboxIndicator />
  </ChoiceboxItem>
  <ChoiceboxItem value="option2">
    <ChoiceboxItemHeader>
      <ChoiceboxItemTitle>Option 2</ChoiceboxItemTitle>
    </ChoiceboxItemHeader>
    <ChoiceboxIndicator />
  </ChoiceboxItem>
</Choicebox>

Features

Card-style radio and checkbox options
Customizable header, title, and description for each option
Accessible keyboard navigation
Visual feedback for selected and hover states
Support for disabled states
Customizable styling through className props
Flexible layout with inline and block options
Clear visual hierarchy with title and subtitle support
Consistent styling with the design system
Support for custom content and indicators

Examples

Default layout

Option 1(the first option)

This is the first option

Option 2(the second option)

This is the second option

import {
  Choicebox,
  ChoiceboxIndicator,
  ChoiceboxItem,
  ChoiceboxItemDescription,
  ChoiceboxItemHeader,
  ChoiceboxItemSubtitle,
  ChoiceboxItemTitle,
} from "../../../../../packages/choicebox";

const options = [
  {
    id: "1",
    label: "Option 1",
    subtitle: "(the first option)",
    description: "This is the first option",
  },
  {
    id: "2",
    label: "Option 2",
    subtitle: "(the second option)",
    description: "This is the second option",
  },
];

const Example = () => (
  <Choicebox defaultValue="1">
    {options.map((option) => (
      <ChoiceboxItem key={option.id} value={option.id}>
        <ChoiceboxItemHeader>
          <ChoiceboxItemTitle>
            {option.label}
            <ChoiceboxItemSubtitle>{option.subtitle}</ChoiceboxItemSubtitle>
          </ChoiceboxItemTitle>
          <ChoiceboxItemDescription>
            {option.description}
          </ChoiceboxItemDescription>
        </ChoiceboxItemHeader>
        <ChoiceboxIndicator />
      </ChoiceboxItem>
    ))}
  </Choicebox>
);

export default Example;

Inline Choiceboxes

Option 1

This is the first option

Option 2

This is the second option

import {
  Choicebox,
  ChoiceboxIndicator,
  ChoiceboxItem,
  ChoiceboxItemDescription,
  ChoiceboxItemHeader,
  ChoiceboxItemTitle,
} from "../../../../../packages/choicebox";

const options = [
  {
    id: "1",
    label: "Option 1",
    description: "This is the first option",
  },
  {
    id: "2",
    label: "Option 2",
    description: "This is the second option",
  },
];

const Example = () => (
  <Choicebox
    defaultValue="1"
    style={{
      gridTemplateColumns: `repeat(${options.length}, 1fr)`,
    }}
  >
    {options.map((option) => (
      <ChoiceboxItem key={option.id} value={option.id}>
        <ChoiceboxItemHeader>
          <ChoiceboxItemTitle>{option.label}</ChoiceboxItemTitle>
          <ChoiceboxItemDescription>
            {option.description}
          </ChoiceboxItemDescription>
        </ChoiceboxItemHeader>
        <ChoiceboxIndicator />
      </ChoiceboxItem>
    ))}
  </Choicebox>
);

export default Example;

Snippet Combobox