Input

"use client"

import {
  Field,
  FieldDescription,

Usage

import { Input } from "@/components/ui/input"

<Input />

Examples

Basic

"use client"

import { Input } from "uilab-core"

export function InputBasicExample() {
  return <Input className="w-full max-w-sm" placeholder="Enter text" />
}

Field

Use Field, FieldLabel, and FieldDescription to create an input with a label and description.

"use client"

import {
  Field,
  FieldDescription,

Field Group

Use FieldGroup to show multiple Field blocks and to build forms.

"use client"

import {
  Button,
  Field,

Disabled

Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.

"use client"

import {
  Field,
  FieldDescription,

Invalid

Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

"use client"

import {
  Field,
  FieldDescription,

File

Use the type="file" prop to create a file input.

"use client"

import {
  Field,
  FieldDescription,

Inline

Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

"use client"

import { Button, Field, Input } from "uilab-core"

export function InputInlineExample() {

Grid

Use a grid layout to place multiple inputs side by side.

"use client"

import {
  Field,
  FieldGroup,

Required

Use the required attribute to indicate required inputs.

"use client"

import {
  Field,
  FieldDescription,

Badge

Use Badge in the label to highlight a recommended field.

"use client"

import {
  Badge,
  Field,

Input Group

To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.

import {
  Field,
  FieldLabel,
  InputGroup,
  InputGroupAddon,

Button Group

To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.

"use client"

import {
  Button,
  ButtonGroup,

Form

A full form example with multiple inputs, a select, and a button.

"use client"

import {
  Button,
  Field,