fetaUI
GitHub

Input

The single line text control: a pill on the tray fill that lifts onto the surface when focused.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/input
Playground
Sizes
States
Search
Password
Good
Copy
File
No file chosen
PNG or JPG up to 5 MB.
Inline
Addon
https://
Badge
Beta
We send a POST for every event.
Required
Enter your full name to continue
Grid
Size
Icons animation
Invalid
Disabled
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/input

Sizes

32, 40 and 48 px on Web, one step larger on Mobile.

Invalid
Disabled
Motion

Password

A password input adds show and hide by itself. Strength, 0 to 4, adds a meter and a word.

Good
Size
Disabled
Motion

Accessibility

  • A native input. Use the right type and autocomplete.
  • Reveal and copy are labelled buttons.
  • Required uses aria-required.

Motion

  • Focus lifts the pill to the surface in 120 ms.
  • Copy turns to a check and back after 2 s.
  • The strength meter fills as you type. Invalid never shakes.
  • With reduced motion, the meter jumps and the check swaps.

Responsive behavior

  • 32, 40, 48 px on Web and 40, 48, 56 px on Mobile.
  • At least 16 px text on Mobile, so iOS does not zoom.

Performance

  • Focus states are CSS. Motion runs only for the alert icon and the copied check.
  • The strength meter renders only when strength is set.
  • The Copied timer is 2 seconds and is cleared on unmount.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import Input from @/components/fetaui/input. Wrap it in Field for a label, help and error, and it picks up id, invalid, disabled and required from there.
  • All native input props pass through. Use the right type and autoComplete.
  • strength is 0 to 4 and only displays. You compute the score.
  • type="password" adds the reveal button by itself. copyable copies the current value and composes IconButton.
/docs/components/input/markdown
PreviousLabel
NextTextarea

Related

FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.Input GroupComponentIcons, text and actions inside the same ring as the input, so the group focuses and validates as one.TextareaComponentMulti line text with a mono character count.LabelComponentThe name of a control, tied to it so a click on the label focuses the field.SearchComponentA search field and a command palette for finding anything and running commands.