docs / core / input

Input

a single line of text you type into. anything longer is a textarea, not a taller Input.

intensity · recedesrsc · client

provenance

authored in usva

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

under a Label, inside form rows and field groupsaria-invalid flags the field the error text points atnever unlabeled. a placeholder is not a labelno search icons or buttons stuffed inside. wrap it instead

a11y

a native <input>, named by a Label or aria-label · aria-invalid paints the danger statejest-axe
live demo · try it out
customize
typenative input type
placeholderhint text, never a label
valuethe starting text
invalidsets aria-invalid, paints danger
disableddims to 50%, not-allowed cursor
usagecopy
import { Input } from "usva/primitives/input";

<Input type="email" placeholder="you@example.com" />

props

proptypedefaultnotes
aria-invalidbooleanfalsedanger border and ring for the field the error text points at.
disabledbooleanfalsedims to 50% with a not-allowed cursor.
…InputHTMLAttributesReact.InputHTMLAttributes—every native input attribute passes straight through.

get it

npx shadcn add https://usva.build/r/input.jsoncopy
source · components/ui/input.tsxexactly what this command copiescopy
"use client";
import * as React from "react";
import { cn } from "@/lib/utils";

export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;

export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, ...props }, ref) => (
    <input
      ref={ref}
      className={cn(
        "h-10 w-full rounded-lg border border-border bg-bg px-3 text-sm text-ink placeholder:text-muted",
        "outline-none transition-control duration-base ease-soft",
        "hover:border-border-strong",
        "focus-visible:border-transparent focus-visible:ring-focus",
        "aria-invalid:border-danger aria-invalid:ring-2 aria-invalid:ring-danger/40",
        "disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    />
  ),
);
Input.displayName = "Input";