Input

Single-line text field with Ward's hairline border; the border darkens on focus instead of drawing a ring.

Installation

pnpm dlx shadcn@latest add @ward/input

Add the Ward registry to components.json once:

"registries": {
  "@ward": "https://ward.so/r/{name}.json"
}

Or install from the URL with no configuration: npx shadcn@latest add https://ward.so/r/input.json

Usage

import { Input } from "@/components/ui/input";
<Input type="email" placeholder="you@example.com" />
<Input aria-invalid disabled defaultValue="Read only" />

Props

PropTypeDefaultDescription
typestring"text"The native input type, such as email, password, search or file.
placeholderstring-Hint shown while the field is empty.
valuestring-Current value, when the parent controls the field; pair it with onChange.
aria-invalidbooleanfalseMarks the field as invalid and draws the destructive border.
disabledbooleanfalseDim the field and stop it taking focus or input.

Ward · Version 1.0.0 · Registry manifest