Accessible composite TextField component
accessible composition and prop forwarding.
associate label and input via matching for and id, generate a unique id, spread remaining props onto the native input.
a label not tied to the input, or swallowing native props.
What's really being asked
Whether you can compose a labelled input that is accessible by default and remains a flexible wrapper over the native input.
The full answer
Associate the label and input explicitly. Give the input a unique id and set the label's for attribute to that id, or wrap the input inside the label element. Either creates a programmatic association so clicking the label focuses the input and assistive tech reads the label as the input's accessible name. Generate the id automatically, using a stable unique-id hook or utility, so rendering several TextFields does not produce duplicate ids. For prop forwarding, accept the component's own props, like label text, helper text, and error, then spread the remaining props onto the native input so consumers can pass type, placeholder, required, value, onChange, and any other native attribute without you enumerating each. Link helper and error messages with aria-describedby, and reflect invalid state with aria-invalid.
The mistakes people make
Rendering a label not tied to the input, so clicking it does nothing and screen readers miss the name. Hardcoding a single id, which collides when the field is reused. Swallowing native props so consumers cannot set type or required. Using placeholder as a substitute for a label, which disappears on input.
What usually comes next
How do you expose the underlying input for refs? Forward a ref to the native input. How do you announce errors? aria-describedby plus aria-invalid and a live region if needed. Wrapping versus for/id? for/id is more flexible for layout.
A concrete example
The TextField generates id field-3, renders a label with for set to field-3 and an input with that id. Clicking the label focuses the input. The component pulls off label and error, then spreads the rest, so a caller passing type email and required has those applied to the real input. An error message gets an id referenced by the input's aria-describedby.
Interview question
What makes clicking a TextField's label focus its input and gives screen readers the field's name?
- a.Placing the label visually above the input
- b.Setting the input's placeholder to the label text
- c.Adding a tabindex to the label
- d.A programmatic association via matching for and id (or wrapping the input in the label)Correct
Why? this is the answer
Matching for and id (or nesting the input in the label) creates the association that links label to input for both click-to-focus and the accessible name. Visual placement and placeholders do not establish that programmatic link.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #accessibility
- #forms
- #component-api
- #prop-forwarding
- #design-systems
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on accessibility — each one lists the topics its interview covers.
See open roles