Input

Text input field with token-styled focus and invalid states.

Input is a native <input> styled through the token contract: the field tint is bg-input/30, focus uses the --ring outline, and invalid swaps both to --destructive.

Installation

import { Input } from "@iammikz/srui";

Usage

<Input placeholder="Email address" />

Props

PropTypeDefaultDescription
invalidbooleanfalseRed border + aria-invalid="true"
...propsReact.InputHTMLAttributes<HTMLInputElement>type="text"All native input attributes

type="file" inputs are styled: the file button renders transparent with foreground text, matching the field.

Examples

Invalid state

Disabled

File input

The native browse button is styled to match — transparent background, foreground text — so a file field sits comfortably next to the rest.

Accessibility

  • Native <input>; label it with Label + htmlFor, or wrap it in FormField which wires that up.
  • invalid sets aria-invalid — pair it with an error message in role="alert" (see FormField).
  • Focus is visible via a 2px outline-ring with offset, on :focus-visible only, so pointer clicks don't show a ring.