Input

A flat text input. Thick navy outline, soft pink focus ring, with optional add-ons for leading/trailing icons and prefix/suffix labels.

Basic

input-basic-demo.app

Pass any React node through leadingIcon or trailingIcon — useful for search bars, password reveals, or action shortcuts.

input-icons-demo.app

Use prefix for currency / symbol labels and suffix for units. They render in a small pastel panel chip so the value stays readable.

input-prefix-suffix-demo.app

RpIDR

$USD

terminal.sh

npx y2kui@latest add input

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

Prop	Type	Default	Description
`leadingIcon`	ReactNode	—	Icon rendered on the left inside a pastel add-on chip.
`trailingIcon`	ReactNode	—	Icon rendered on the right inside a pastel add-on chip.
`prefix`	ReactNode	—	Short label shown on the left of the value (e.g. 'Rp', '@', '$').
`suffix`	ReactNode	—	Short label shown on the right of the value (e.g. 'IDR', 'kg', 'USD').
`wrapperClassName`	string	—	Extra classes applied to the outer wrapper when add-ons are present.
`type`	string	`'text'`	Native HTML input type.
`placeholder`	string	—	Placeholder text.
`disabled`	boolean	`false`	Disable the input.
`aria-invalid`	boolean	`false`	Mark the input as invalid for accessibility.