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
InputGroup — animated chrome with an optional press overlay. Pass onPress for the group (text focus, action rows, choice items). Decorative addons are included in the hit target; InputAddonButton stays above the overlay.
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.

Prop

Type

Extends React Native View props plus press handlers (onPress, accessibility, testID) that are applied to an overlay Pressable. Decorative addons sit in the hit target; InputAddonButton stays above the overlay. Use inputFocused while a TextInput is focused so caret and selection work.

Prop

Type