jsp-dsv0.1

Inputshadcn

A single line of text.

Inputs
Install
npx shadcn add input
Import from
@/components/ui/input
Guidance
draft · v0.1.0

Examples

As installed from shadcn – rendering in jsp-ds tokens through the bridge.

We only use it to send sign-in links.

Always with a visible label, and help text under it.
Disabled, read-only and invalid. Invalid pairs aria-invalid with an error message.
A search input: type="search" and a label, even if it is visually hidden.

Guidance

When to use

  • A single line of text: a name, an email, a search, a number.

Rules

  • Always inside a Field with a visible label – see Field.
  • Use the right type (email, tel, url, search, number) and autoComplete, so phones show the right keyboard and browsers can fill it in.
  • Size the input to the expected answer: a postcode field is narrow.
  • Don't disable an input to show a value that can't change – use readOnly, which can still be focused and copied.

Accessibility

  • The border meets 3:1 in jsp-ds even though shadcn's doesn't (ISS-16).
  • Invalid: aria-invalid plus a FieldError linked by aria-describedby.

Spec

The variables this component reads, and the jsp-ds token behind each, resolved live. Switch mode to see them change.

TokenCSS variableValue now
color.border.subtleBorder (ISS-16)--input…
color.focus.ring--ring…
color.text.subtlePlaceholder and help text--muted-foreground…
color.action.destructive.textInvalid--destructive…
radius.md--radius-md…

Install

Terminal
npx shadcn add input
Import
import { Input } from "@/components/ui/input"

From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.