0

Input

PreviousNext

A text input component for forms and user data entry with built-in styling and accessibility features.

Your API key is encrypted and stored securely.

import {
  Field,
  FieldDescription,

Installation

bunx --bun shadcn@latest add @ondo-ui/input

Usage

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

Composition

Use the following composition to build an Input:

Input

Examples

Basic

A basic input with a placeholder.

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

export default function InputBasic() {

Sizes

xs, sm, default, lg, xl, and 2xl.

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

export default function InputSizes() {

InputGroup does not support sizing. It is fixed at the default height and strips the size prop from the input it wraps, so an xl input cannot be placed inside one.

Field

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

Choose a unique username for your account.

import {
  Field,
  FieldDescription,

Field Group

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

We'll send updates to this address.

import { Button } from "@/components/ui/button"
import {
  Field,

Disabled

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

This field is currently disabled.

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.

This field contains validation errors.

import {
  Field,
  FieldDescription,

File

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

Select a picture to upload.

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.

import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Grid

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

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Required

Use the required attribute to indicate required inputs.

This field must be filled out.

import {
  Field,
  FieldDescription,

Badge

Use Badge in the label to highlight a recommended field.

import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Input Group

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

https://
import { IconInfoCircle } from "@tabler/icons-react"

import { Field, FieldLabel } from "@/components/ui/field"

Button Group

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

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"

Form

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

We'll never share your email with anyone.

import { Button } from "@/components/ui/button"
import {
  Field,

API reference

The component is a styled wrapper around the standard HTML <input> element and accepts all of its attributes. Common props include:

  • type - The input type (text, email, password, number, etc.)
  • size - "default" | "xs" | "sm" | "lg" | "xl" | "2xl", default "default". Controls the input's height, padding, text size, and corner radius. xl and 2xl keep their text size at every breakpoint; the smaller sizes drop to text-sm on desktop
  • placeholder - Placeholder text shown when the input is empty
  • disabled - Disables the input
  • required - Marks the input as required
  • aria-invalid - Marks the input as invalid for accessibility
  • id - Unique identifier for the input