Core

Selection Box

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

Example

Usage

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.

Usage

Custom Child

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

Usage

Props

Loading types…

Edit on GitHub

Last updated on

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.