Input
Collect a single line of text with clear focus and validation states.
import { Input } from '@youj/react'
Installation & usage
npm i @youj/reactFor an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.
Use Input for short text such as a name, email address or URL. Choose a Textarea for multiple lines, an Input Group for a prefix, icon or button inside the field, or a Select for a known list of answers.
import { Field, FieldLabel, Input } from '@youj/react'
export function DisplayName() {
return (
<Field>
<FieldLabel>Display name</FieldLabel>
<Input name="displayName" autoComplete="name" />
</Field>
)
}Inside a Field, the input is labeled, described and validated with no extra wiring, and it takes required from the Field. On its own, name it with aria-label or a Label.
Description
An invite-by-email field with a Send invite button that shows an error for an invalid address.
Inputs in their hover, focus, invalid, disabled and read-only states.
Hover strengthens the border. Focus turns the border accent inside a soft 3px halo, so the field reads as lit rather than outlined. Invalid swaps both to the destructive color. Disabled and read-only are native, and read-only gets a muted fill so it doesn't look editable.
Set aria-invalid yourself on a standalone input. Inside a Field, invalid sets it for you.
An input whose value you own.
onValueChange hands you the new string, and the value you pass back is what the input shows. Use it to format as people type. The standard onChange event works too.
Code
input-demo.tsx, the Demo story. The component itself comes from the package.
Reference
PropsEvery native input attribute passes through, plus Base UI's…
Props
Input adds no props of its own. They pass through to InputPrimitive.Props.
Every native input attribute passes through, plus Base UI's onValueChange(value, details), which reports the new value as a string.
MotionHover and focus · reduced motion
Motion
| Moment | Tokens | ||
|---|---|---|---|
| Hover and focusborder color, fill and the focus halo | duration.fastease.standard140ms · cubic-bezier(0.2, 0, 0, 1) | 140mscubic-bezier(0.2, 0, 0, 1) |
Reduced motion
There is nothing to reduce: the input only changes color, on the fast token.
Reduced motion
The input doesn't move. Its border, fill and halo change color on the fast token with or without reduced motion.
AccessibilityKeyboard, ARIA, focus
Accessibility
- It's a native
<input>. Give it a visible label through a Field, or anaria-labelwhen the context names it, like a search box. - Focus shows as an accent border and halo. A transparent outline rides along, so Windows high-contrast mode still draws a focus indicator.
- Text is 13px, and 16px on touch screens, so iOS doesn't zoom the page when the input takes focus.
- Pick the right
type,inputModeandautoComplete. They choose the on-screen keyboard and let browsers and password managers fill the field.