Input

Text inputs allow users to enter and edit text. Supports labels, icons, dropdowns, leading text, trailing buttons, error states, and multiple sizes.

Default

A basic input with label, hint text, and required indicator.

Default Input

This is a hint text to help user.

Disabled

A disabled input that cannot be interacted with.

Disabled

Invalid / Error

Pass an error prop to show validation state with a red border and error message.

Error State

Please enter a valid email address.

Sizes

Three sizes: sm (36px), md (44px), and lg (52px).

Small / Medium / Large

Leading Icon

An icon positioned inside the left of the input field.

Leading Icon

Input with a leading icon.

Leading Dropdown

A dropdown selector on the left side, useful for country codes or prefixes.

Leading Dropdown

Input with a leading country selector.

Trailing Icon

An interactive icon on the right, such as a password visibility toggle.

Trailing Icon (Password Toggle)

Trailing Dropdown

A dropdown on the right side, useful for currency or unit selectors.

Trailing Dropdown

Input with a trailing currency selector.

Leading Text

A static text prefix inside the input, such as a URL protocol.

Leading Text

https://
Input with leading text prefix.

Payment Input

A card number input with a leading card icon and trailing card brand indicator.

Payment Input

Enter your card details.

Trailing Button

An action button attached to the right edge of the input.

Trailing Button

Send an invite to a team member.

Usage

Import the Input component and configure with props.

tsx
import { Input } from "@/components/ui/Input";

// Basic
<Input label="Email" placeholder="you@example.com" required />

// With leading icon
<Input
    label="Search"
    placeholder="Search..."
    leadingIcon={<SearchNormal1 size={16} variant="Bulk" />}
/>

// With trailing button
<Input
    label="Subscribe"
    placeholder="Enter email"
    trailingButton={<button>Subscribe</button>}
/>

// With leading text
<Input label="Website" placeholder="yoursite.com" leadingText="https://" />

// With leading dropdown
<Input
    label="Phone"
    placeholder="(555) 000-0000"
    leadingDropdown={<button>US ▾</button>}
/>

Props

PropTypeDefaultDescription
labelstring—Label text above the input.
errorstring—Error message. Replaces hint when present.
hintstring—Helper/hint text below the input.
helperTextstring—Alias for hint (backward compatible).
inputSize"sm" | "md" | "lg""md"Input height size.
requiredbooleanfalseShow required asterisk on label.
disabledbooleanfalseDisable the input.
leadingIconReactNode—Icon positioned inside the left of the input.
trailingIconReactNode—Icon positioned inside the right of the input.
leadingDropdownReactNode—Dropdown element on the left (e.g. country code).
trailingDropdownReactNode—Dropdown element on the right (e.g. currency).
leadingTextstring—Static text prefix (e.g. 'https://').
trailingButtonReactNode—Button element on the right edge.
wrapperClassNamestring—Additional CSS class for the wrapper.