ComponentsForms

Input

A single-line text field with sizes and an invalid state.

Playground

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

Usage#

The same component at all four levels. Pick the one that fits your project; they share tokens, so they mix.

npm i junco @junco/tailwind

import { Input } from "junco";

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

Inside a Field, the error is linked with aria-describedby and the input is marked invalid. Type something else to clear it.

Username

Letters, numbers and dashes.

That username is taken.

Also takes every native <input> attribute.

size: Height, padding and font size.; "sm" | "md" | "lg"; Default: "md"
isInvalid: Sets aria-invalid and the error border. Inside a Field, setting error does this for you.; boolean; Default: false
type: Native input type.; string; Default: "text"
className: Extra classes.; string

Prop	Type	Default
`size` Height, padding and font size.	`"sm" \| "md" \| "lg"`	`"md"`
`isInvalid` Sets aria-invalid and the error border. Inside a Field, setting error does this for you.	`boolean`	`false`
`type` Native input type.	`string`	`"text"`
`className` Extra classes.	`string`	`–`

Keyboard interactions
Key	Action
`Tab`	Moves focus into and out of the field.

Always give an input a visible label: wrap it in a Field or pair it with a Label. Placeholder text is not a label.
Invalid state is shown by a red border and an error message, never the border color alone.
Inside a Field, the help text and error are announced with the input through aria-describedby.