Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Input

Input

Displays a form input field or a component that looks like an input field.

Preview

Installation

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

Usage

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

<Input />

Examples

Default

File

Disabled

With Label

With Button

Sizes

With Start Icon

Search with Keyboard Shortcut

⌘k

With Start Add-on

https://

Password with Toggle

Search with Loader

Search

With Error

This email is invalid.

OTP Outlined

OTP Outlined Grouped

Time Input

Requires use-mask-input package

Card Number

Requires react-payment-inputs package

Expiry Date

Requires react-payment-inputs package

CVC Code

Requires react-payment-inputs package

Card Details

Requires react-payment-inputs package

API Reference

Input

Extends all native input element props.

size - "sm" | "default" | "lg"

On This Page

  • Preview
  • Installation
  • Usage
  • Examples
  • API Reference

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.