Input

Import

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

Playground

Interactively configure the Input props below.

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

Sizes

Three size options control the height and font size of the input, matching the Select component scale.

<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 and shadow 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 and automatically sizes SVGs to 20px.

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

Password Toggle

Combine rightIcon with an interactive element such as Toggle to build a password visibility toggle without any extra wrapper components.

const [visible, setVisible] = useState(false);

<Input
  label="Password"
  type={visible ? 'text' : 'password'}
  placeholder="Enter password"
  rightIcon={
    <button onClick={() => setVisible(!visible)}>
      {visible ? <EyeOff /> : <Eye />}
    </button>
  }
/>

With Label and Helper

Pass label to render an associated <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 accessible error description below the field.

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

With Button

rightButton renders a small action button flush inside the right edge of the input, styled automatically to match the input height.

<Input label="Nickname" placeholder="Enter nickname" rightButton={<button>Check</button>} />

Disabled

The native disabled attribute reduces opacity and blocks all pointer interactions.

<Input placeholder="Disabled input" disabled />

API Reference