Input

Import

import { Input } from '@tac-ui/native';

Playground

Interactively configure the Input props below.

<Input placeholder="Enter text..." />

Sizes

Three size options control the height and font size of the input.

<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium (default)" />
<Input size="lg" placeholder="Large" />

Default

The base input renders a full-width styled text field with smooth border transitions on hover and focus.

<Input placeholder="Enter text..." />

With Icons

Use leftIcon or rightIcon to render an icon inside the input. The icon slot accepts any React node.

import { Search } from '@tac-ui/icon-native';

<Input placeholder="Search..." leftIcon={<Search size={16} />} />

With Label and Helper

Pass label to render a text label above the field. helperText appears below when there is no active error.

<Input label="Email" placeholder="[email protected]" helperText="We'll never share your email." />

Error State

Set error to apply destructive border styling and pass errorMessage to display an error description below the field.

<Input label="Username" placeholder="username" error errorMessage="Username is already taken." />

Disabled

Set editable to false to disable the input. It renders at reduced opacity and ignores all user interaction.

<Input placeholder="Disabled input" editable={false} />

API Reference