Registry Index

Search the catalog

Type to search items across every indexed registry, or pick a page.

ComponentReactregistry:ui1 dependency

Input

input

Labeled text field that wires a real label to the input for you, with an optional hint, error and password reveal.

Live, loading

Starting the live preview…

Runs in a sandboxed frame on a separate origin, in its registry's own theme. Mounted with no props — an item that paints an empty box is given its name as text, and some items need input to show anything.

Notes from the author

Pass `label` and it renders a real label element tied to the input; otherwise supply your own aria-label. A placeholder is a hint, so keep the label for the field's name. Native input attributes are forwarded, so type, placeholder, and validation work as usual. `hint` adds supporting text below the field and `error` replaces it, marking the field aria-invalid and announcing through role=alert -- reach for `error` whenever a submit button greys out, so the reason is on screen rather than guessed at. On a `type="password"` field, passing BOTH `revealLabel` and `hideLabel` adds a show/hide toggle; it renders only when both are given, since an icon-only control with no accessible name is worse than no control.
4 other registries

Similar components

Other registries' take on input.

@whiskeyjack

More from @whiskeyjack