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.

API Reference

Input

Extends React Native TextInput props, omitting editable.

InputPressable

Extends React Native Pressable props.

InputAddon

Extends React Native View props.

InputAddonIcon

Clones a single child icon with sizing and color classes.

InputAddonButton

Extends Button props, omitting Button size.

InputAddonButtonText

Same API as ButtonText. Must be used inside InputAddonButton.

InputAddonButtonIcon

Same API as ButtonIcon. Must be used inside InputAddonButton.