Input
Single-line text field. Pair with Label for forms. Focus ring is a 3px halo in the focus token on top of a 1px border change.
$npx shadcn@latest add https://ui.btng.studio/r/input
With label
Always pair with a visible Label via htmlFor and id. A placeholder is not a label.
Types
type and autoComplete matter more than they look. On mobile, type=email shifts the keyboard to include @ without switching layouts.
Invalid
Validation state uses aria-invalid=true. The border and focus halo switch to the error token automatically.
Must be 5 digits.
Disabled
Pointer events off, disabled surface tokens apply.