ComponentsCore
Selection Box
A customizable, accessible grid or stacked selection component with optional labels, descriptions, icons, and checkboxes.
Example
Usage
Installation
Required Component
This component depends on Checkbox. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Add composeTailwindRenderProps helper using cn and composeRenderProps from react-aria-components for conditional class rendering.
Copy and paste the following code into your project.
npx libravelui@latest add selection-boxAnatomy
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…