Input

InstallationCopy Anchor Link

{
  "registries": {
    "@rabtx": "http://localhost:3002/r/{name}.json"
  }
}

npx shadcn@latest add @rabtx/input

npx shadcn@latest add http://localhost:3002/r/input.json

UsageCopy Anchor Link

Installed from the registry, import from @/components/ui/input; inside this monorepo, from @rabtx/ui/input.

import { Field } from "@rabtx/ui/field";
import { Input } from "@rabtx/ui/input";

export function EmailField() {
  return (
    <Field label="Email" hint="We only use it to sign you in.">
      <Input type="email" placeholder="you@example.com" />
    </Field>
  );
}

It is a real <input> inside a wrapper that draws the field, so type, autocomplete, native validation and phone keyboards all work. Inside a Field it receives its id, its description and the invalid state. Outside one, give it a floating label or an aria-label.

With a Select and a ButtonCopy Anchor Link

The default look is the Select trigger's: the same fill, edge, corners, hover, focus ring and error, so an Input, a Select and a Button of one size line up in a row.

VariantsCopy Anchor Link

outline (the default) matches the Select. filled is the recessed field from the design system: a soft fill with a dark top edge fading to a light bottom edge. In data-depth="flat" it becomes one plain border.

Icons and shapeCopy Anchor Link

leadingIcon and trailingIcon are decorative (hidden from screen readers) and sized for you. pill makes the field fully round, for search bars, independent of the radius mode. Clicking an icon or the padding focuses the input.

AddonsCopy Anchor Link

startAddon and endAddon are segments at either end, divided from the text by a line. Their text is part of the page, so screen readers read it.

Search and clearCopy Anchor Link

clearable adds a clear button that is there only while the input has text. It empties the input the way typing would, so a controlled input gets its onChange, then returns focus. onClear runs afterwards; clearLabel names the button (default "Clear").

PasswordCopy Anchor Link

PasswordInput adds an eye button. Its name stays "Show password" and its aria-pressed says whether the password is showing; the two eyes cross-fade with a little blur.

Floating labelCopy Anchor Link

label puts the label inside the field. It rests where the text goes and floats to the top edge, at 80%, on focus or once the input has a value (including autofill). A placeholder then shows only while focused. Use it at md or lg; sm grows to md. Use it instead of a Field label, not with one.

StatesCopy Anchor Link

• Error: a Field error (or aria-invalid) turns the edge red and shakes the field once. Native constraints (required, type="email", pattern, minLength) do the same through :user-invalid, only after the person has edited the field and left it.
• Success: success draws a green tick at the end. Say why in the hint, since the tick is decorative.
• Disabled fades to 50%. Read-only tints the fill and hides the clear button.

One-time codeCopy Anchor Link

InputOTP is one real input shown as a row of slots, so typing, backspace, paste and SMS autofill (autocomplete="one-time-code") work as usual. A single focus ring glides to the next slot, a caret blinks there, and each character rolls up into its slot. onComplete fires when the last slot fills. It sets a pattern, so an incomplete code is :user-invalid after the person leaves it.

APICopy Anchor Link

Input takes everything a native <input> takes, except the numeric size, plus:

PasswordInput takes the same props (no type or action) plus revealLabel (default "Show password").

InputOTP takes the native input props plus:

Outside React, the class names are exported from @rabtx/ui/input/styles:

<div class="rx-input-field rx-input-md">
  <span class="rx-input-icon" aria-hidden="true"><svg>…</svg></span>
  <input class="rx-input" aria-label="Search" placeholder="Search" />
</div>

Give the input a placeholder (a single space will do): :placeholder-shown is how the CSS knows it is empty, for the clear button and the floating label.

ThemingCopy Anchor Link

The Input reads only the theme tokens.

How the motion worksCopy Anchor Link

Reduced motion and data-motion="off" drop the shake, float, glide and roll; every state still shows.

Browser supportCopy Anchor Link

• :has(), :user-invalid, :autofill and linear() easings: current Chrome, Edge, Safari and Firefox. Without :user-invalid native errors simply do not turn red; Field errors still do.

AccessibilityCopy Anchor Link

• A real input: its role, value, validation and autocomplete come from the browser.
• Decorative icons are hidden; addons, the clear button ("Clear") and the eye ("Show password", pressed or not) are named.
• The code input is a single text field with autocomplete="one-time-code", so screen readers read and edit one value; the slots are hidden from them.
• Focus shows a blue edge and a soft ring. Error shows a red edge and ring.