Input

A text field with five built-in variants - name, email, username, password, and plain text. Each ships with its own icon, placeholder, blur validation, and an error-shake animation.

Installation

npx stepwise-ui add input

Full Name

Your full legal name.

import { Input } from '@/components/stepwise/input'

// Basic - each variant ships with a sensible default label and placeholder
<Input variant="name" />
<Input variant="email" />
<Input variant="username" />
<Input variant="password" />
<Input variant="text" label="Bio" placeholder="Tell us about yourself" />

// Custom label
<Input variant="email" label="Work Email" />

// Custom placeholder
<Input variant="name" placeholder="First name only" />

// Icon control - suppress or move the icon
<Input variant="name" showIcon={false} />
<Input variant="email" iconSide="right" />

// External error (server / form library)
<Input variant="email" error="That email is already taken." />

// Hint text
<Input variant="username" hint="Letters, numbers, and underscores only." />

// Disabled
<Input variant="name" defaultValue="Ada Lovelace" disabled />

Usage

import { Input } from '@/components/stepwise/input'

// Basic - each variant ships with a sensible default label and placeholder
<Input variant="name" />
<Input variant="email" />
<Input variant="username" />
<Input variant="password" />
<Input variant="text" label="Bio" placeholder="Tell us about yourself" />

// Custom label
<Input variant="email" label="Work Email" />

// Custom placeholder
<Input variant="name" placeholder="First name only" />

// Icon control - suppress or move the icon
<Input variant="name" showIcon={false} />
<Input variant="email" iconSide="right" />

// External error (server / form library)
<Input variant="email" error="That email is already taken." />

// Hint text
<Input variant="username" hint="Letters, numbers, and underscores only." />

// Disabled
<Input variant="name" defaultValue="Ada Lovelace" disabled />

Props

Extends all native <input> props except id and type (managed internally). Works as both controlled and uncontrolled.

PropTypeDescription

variant

"text" | "name" | "email" | "username" | "password"

Controls input type, default label, default placeholder, built-in icon, and blur validation. Default: "text".

label

string

Label shown above the field. Omit to use the variant default (e.g. "Full Name"). Pass an empty string to hide the label entirely.

placeholder

string

Placeholder text inside the field. Omit to use the variant default (e.g. "name@example.com" for email).

showIcon

boolean

Show or hide the variant's built-in icon. Default: true for all named variants. Always false for "text".

iconSide

"left" | "right"

Which side to place the icon. Default: "left". The password eye-toggle is always on the right regardless.

icon

ReactNode

Custom icon node - replaces the variant default while respecting showIcon and iconSide.

error

string

External error message (from a server or form library). Overrides built-in validation and triggers the shake animation.

hint

string

Helper text shown below the field. Hidden when an error is active.

disabled

boolean

Dims the field and blocks all interaction.

className

string

Applied to the outer flex wrapper - useful for controlling width or margin.