Input

This component requires the FyskProvider. See Quick Start →

Preview

Input

TypeScript

bash

1npx shadcn@latest add https://fysk.dev/r/input.json

tsx

1import { Input } from "@/components/ui"
2
3<Input type="email" placeholder="Email" />

Add visual context with icons at the start or end of the input field.

Component

TypeScript

You can add a callback to icons using the onIconClick prop. This is perfect for password toggles, search clears, or custom actions.

Component

TypeScript

Password Toggle

Clearable Search

Explore multiple visual styles suited for different backgrounds and levels of prominence.

Component

TypeScript

Icon Support: Integrated slots for start or end positioned icons with automatic padding adjustment.
Visual Variants: Supports secondary, outline (bordered), ghost, and glass (frosted glass) styles.
Interactive Icons: Add click actions to icons using the onIconClick prop, transforming the icon into an accessible button.
State Feedback: Built-in visual states for loading, success, and error using icons and colors.
Micro-Animations: Smooth focus transitions and background shifts.

Prop	Type	Default	Description
`variant`	`string`	`"default"`	Visual style: `default`, `secondary`, `outline`, `ghost`, `glass`.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	The visual size of the input.
`state`	`"idle" \| "loading" \| "success" \| "error"`	`"idle"`	Overlays an icon based on state.
`icon`	`React.Node`	-	Primary icon to display.
`iconPosition`	`"start" \| "end"`	`"start"`	Where to place the icon.
`iconLoading`	`React.Node`	-	Custom loader icon override.
`iconSuccess`	`React.Node`	-	Custom success icon override.
`iconError`	`React.Node`	-	Custom error icon override.
`onIconClick`	`(e: MouseEvent) => void`	-	Callback to make the icon interactive.

Accepts all standard HTML input attributes.

Interactive Icons: Added `onIconClick` prop to support clickable icons (e.g., password toggle).
Glass Variant: Introduced `glass` variant with backdrop blur effect.
Pixel Perfection: Upgraded to `shadow-xs` and refined focus states for a cleaner look.
Accessibility: Clickable icons are now automatically rendered using a `button` tag with proper focus states.