Input

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

export default function InputDemo() {
  return (
    <div className="w-80">
      <Input type="text" placeholder="Enter your name" />
    </div>
  )
}

Input renders a native input element with a filled control style. It supports every native input type, including email, password, number, search and file, and adds a size prop for three heights.

Use it for short, free-form values. For multi-line text use a textarea, for icons, buttons or text attached to the field use InputGroup, and for one-time codes use InputOTP.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/input

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add input

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react

2. Copy the source into components/ui/input.tsx:

3. Update the import paths to match your project.

Usage

import { Input } 

<div

Use defaultValue for an uncontrolled field, or value with onChange to control it. Give every input a visible label, for example with FieldLabel inside a Field, or set aria-label when a visible label is not possible. Choose a size that matches neighboring controls such as a Button.

Examples

Sizes

The sm, md and default sizes, each next to a button of matching height.

Types

Inputs with email, password, number and search types.

With value

An input that starts with a defaultValue.

File

A file input with an accessible name that accepts a chosen file.

Invalid

An input marked with aria-invalid, showing the error style.

Disabled

A disabled input that ignores typing.

API Reference

Accessibility

• Renders a native input, so the role follows its type: textbox by default, spinbutton for number and searchbox for search.
• Needs an accessible name from an associated label or aria-label.
• Set aria-invalid to communicate a validation error.
• A disabled input cannot be focused or edited.

Notes

• Styling hooks: data-slot="input" and data-size.
• Uses the secondary, primary (caret), muted-foreground (placeholder) and destructive colors, and opacity-50 when disabled.
• The native size attribute is replaced by the size prop.

Input wraps a TextInput through the field control primitive. It tracks its own focused, filled, invalid and disabled state and styles itself from that state: a focus border while editing, a destructive border and tint when invalid, and 50% opacity when disabled.

It comes in three sizes: default (44 pt), md and sm. Use the default size for forms on a full screen, and the smaller sizes inside dense layouts such as toolbars or sheets.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/input

$ pnpm dlx @esuiss/ui@latest add input

$ pnpm dlx @esuiss/ui@latest add input --platform swift