ComponentsCore

Selection Box

A customizable, accessible grid or stacked selection component with optional labels, descriptions, icons, and checkboxes.

Example

Installation

Checkbox

A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Add composeTailwindRenderProps helper using cn and composeRenderProps from react-aria-components for conditional class rendering.

lib/render-props.ts

Copy and paste the following code into your project.

components/ui/core/selection-box.tsx
npx @libravelui@latest add selection-box

Anatomy

import {
  Selectionbox,
  SelectionboxItem,
} from "@/components/ui/core/selection-box";
<Selectionbox selectionMode="multiple">
  <SelectionboxItem
    label="Label belongs here"
    description="Some description."
  />
</Selectionbox>

Another Examples

Single Selection

You can select only one item at a time, allowing users to make a clear and exclusive choice.

Custom Child

You can customize the content inside each selection box, giving you flexibility to design unique layouts or add interactive elements.

Props

Loading types…

Edit on GitHub

Select

A select component presents a dropdown list of predefined choices, enabling users to choose a single option from the list.

Slider

A slider allows a user to select one or more values within a range.