ComponentsCore

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.

Example

Text Field

A text field allows users to input plain text, commonly used for names, emails, search queries, and other short-form data.

Number Field

A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.

Checkbox

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

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.

Installation

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/field.tsx
npx @libravelui@latest add field

Props

Loading types…

Edit on GitHub

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.

Form

A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors.