forms
Input
A single-line text control with addons, sizes and native form participation.
Examples
Variants and states
Affixes
Decorative only. Anything a user can click belongs outside the field, where it can own its own focus.
Sizes
State gallery
Eight states side by side — default through success — so a status never has to be guessed from a diff.
Bold styles
Eight loud looks built with plain `className` on top of the same Input — neon, glass, a gradient ring, and more. Copy any tile on its own.
Modern styles
Seven quieter looks — frosted glass, a floating label, a floating card, an animated gradient border. Copy any tile on its own.
Advanced interactions
Six behaviors layered on top of the plain Input — a password toggle, a debounced availability check, a copy field. Each tile copies with its state included.
The eye toggles the input's type, nothing else moves.
The clear button fades in only once there is something to clear.
Debounced by 900ms, so a fast typist never sees it flicker.
Read-only, with its own button rather than a click handler buried in an icon.
8 components
Unique concepts
Twelve less-common shapes — five one-time-code layouts, a focus tilt, a rotating placeholder, two volume sliders — each built from a different mechanism.
One-time codes
Fields
Range inputs
In context
The same Input dropped into six real layouts — a navbar, a chat composer, a login card, a command palette. Every tile copies on its own.
Welcome back
Sign in to continue to Noksha
The brand mark updates as soon as the first digit matches.
- Create new project
- Invite teammate
- Open settings
- Switch workspace
- View billing
Composed patterns
Twelve compositions built from Input plus one more part — an attached Select, seven date-range triggers sharing one two-month calendar popover, a tag list. Each tile copies with its helpers.
Composed fields
The dial code lives inside the same control as the number.
A trailing unit picker instead of a leading code.
One control, one submit.
The filter toggle lives beside the field, not inside it.
Press Enter or comma to add a tag.
Date ranges
A single trigger opens presets and a two-month calendar; nothing changes until Apply.
Two dates, one control, one calendar.
Showing the last 30 days.
One calendar for both ends — tap anywhere on the row.
The whole card opens one calendar for both dates.
One pill, one calendar, no separate pickers.
Picking both dates applies the range immediately.
Own the source
Noksha ships as a package and as copy-paste source. Take the files and they are yours to change. These are read from the generated registry, so they are exactly what the library ships — never a paraphrase of it.
Take these files, and field, internal helpers along with them — the imports below point at them. Or let the CLI do it: npx @noksha-ui/cli add input writes them, follows the same dependency graph, and fixes up the imports.
export { Input, inputVariants } from './input.js';
export type { InputProps, InputSize, InputVariant } from './input.types.js';API reference
InputProps
Also accepts everything from Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>.
| Prop | Type | Description |
|---|---|---|
| variant | InputVariant | — |
| size | InputSize | — |
| invalid | boolean | Marks the control invalid. Inherited from `<Field.Root invalid>` when omitted. |
| startIcon | React.ReactNode | Decorative content inside the leading edge — a search glass, a currency symbol. Not interactive: an affix a user can click is a button, and a button inside a text field needs its own focus handling. |
| endIcon | React.ReactNode | — |
| containerClassName | string | Classes for the wrapper that appears when an icon is present. |