Beginner
Link labels, hints and errors with useId
The Field component is used twice, but it hard-codes id="field", so both labels point at the first input, and the hint and error aren't connected to the input at all.
Fix Field with useId: link the <label> to its input (htmlFor/id), give the hint paragraph an id and point the input's aria-describedby at it. When there is an error, also give the error paragraph an id, add it to aria-describedby (ids separated by a space) and set aria-invalid="true" on the input.
The validation already works: submit the empty form and both fields get an error message.
What Check tests
- Each input is labelled by its own label (Name, City)
- The two inputs have different ids
- The component uses
useId - Each input's
aria-describedbypoints to its hint - After an empty submit, both inputs have
aria-invalid="true" - The error message is part of each input's description
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.