ComponentsCore

Checkbox

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

Example

size
Usage

Features

Checkboxes can be built with the <input> HTML element, but this can be difficult to style. Checkbox helps achieve accessible checkboxes that can be styled as needed.

  • Styleable – Hover, press, keyboard focus, selection, and indeterminate states are provided for easy styling. These states only apply when interacting with an appropriate input device, unlike CSS pseudo classes.
  • Accessible – Uses a visually hidden <input> element under the hood, which also enables HTML form integration and autofill. A label element is built-in to ensure the checkbox is usable with assistive technologies.
  • Cross-browser – Mouse, touch, keyboard, and focus interactions are normalized to ensure consistency across browsers and devices.

Installation

Field

The Field component is fundamental and used by many other components. It applies consistent, reusable styles and appears in inputs, labels, descriptions, and other related elements.

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

Copy and paste the following code into your project.

components/ui/core/checkbox.tsx
npx @libravelui@latest add checkbox

Anatomy

import { Checkbox } from "@/components/ui/core/checkbox";
<Checkbox value="value-1" label="Label goes here" />

<Checkbox defaultSelected label="Label goes here" />

<Checkbox
  label="Label goes here"
  description="Description goes here"
/>

<Checkbox>Children belongs here</Checkbox>

Another Examples

Custom Children

Allows full customization of the checkbox content using a render function or custom JSX. Useful when the default label and description structure is not sufficient for specific UI needs.

Controlled

Demonstrates how to control the checkbox state using React state. This pattern is useful when the checkbox needs to respond to or affect external logic or UI.

Props

Loading types…

Edit on GitHub

Checkbox Group

A checkbox group lets users select one or more options from a related list. It's useful when multiple selections are allowed and helps organize choices under a common label.

ComboBox

A ComboBox is an advanced dropdown that lets users search, filter, and select options interactively, combining the convenience of a text input with a list of selectable items.