Input

This component would not typically be used by itself. Instead, it can be used to compose more complex components such as a text input, search input, etc.

Installation

npx shadcn@latest add @tetra-ui/input

Usage

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

<Input placeholder="Enter your username" />

Building custom inputs

The input module exports lower-level primitives for composing custom input components:

• Input — styled TextInput with theme-aware placeholder color
• InputPressable — animated wrapper that handles focus ring and invalid states
• InputAddon — slot for leading or trailing content
• InputAddonIcon — sizes and styles icon children
• InputAddonButton — button styled for use inside an input addon

See Text Input, Search Input, and Action Input for composed examples.