Input - Saturation UI

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/input.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { Input } from "@/components/ui/input"

<Input type="email" placeholder="Email" />

Examples

File

File input variant.

Disabled

Disabled input state.

With Label

Input paired with label.

With Button

Input with subscribe button.

Sizes

Size variants: sm, default, lg.

With Start Icon

Input with leading icon.

Search with Shortcut

Search with Cmd+K shortcut.

With Addon

Input with https:// prefix.

Password Toggle

Password with show/hide.

Search with Loader

Search with loading state.

With Error

Input with validation error.

OTP Outlined

OTP input variant.

OTP Grouped

Grouped OTP layout.

Time Input

Time selection input.

Card Number

Payment card number.

Expiry Date

Card expiration input.

CVC Code

Card security code.

Card Details

Complete card form.

API Reference

Prop	Type	Default	Description
`type`	`string`	`"text"`	The input type (text, email, password, etc.).
`placeholder`	`string`	—	Placeholder text.

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/input.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { Input } from "@/components/ui/input"

<Input type="email" placeholder="Email" />

Examples

File

File input variant.

Disabled

Disabled input state.

With Label

Input paired with label.

With Button

Input with subscribe button.

Sizes

Size variants: sm, default, lg.

With Start Icon

Input with leading icon.

Search with Shortcut

⌘K

Search with Cmd+K shortcut.

With Addon

https://

Input with https:// prefix.

Password Toggle

Password with show/hide.

Search with Loader

Search with loading state.

With Error

Please enter a valid email address.

Input with validation error.

OTP Outlined

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

OTP input variant.

OTP Grouped

Grouped OTP layout.

Time Input

Time

Time selection input.

Card Number

Payment card number.

Expiry Date

Expiry

Card expiration input.

CVC Code

CVC

Card security code.

Card Details

Card Number

Expiry

CVC

Complete card form.

API Reference

Prop	Type	Default	Description
`type`	`string`	`"text"`	The input type (text, email, password, etc.).
`placeholder`	`string`	—	Placeholder text.