Skip to content

.tip

· one of the small things

useId for label and input ids

Hard-coded ids collide as soon as the component renders twice, and random ids don't match between server and client. useId is stable across both and unique for each instance.

const id = useId();
<label htmlFor={id}>Email</label>
<input id={id} aria-describedby={`${id}-hint`} />

Use it for aria-controls, aria-labelledby and anything else that ties two elements together by id.

reactaccessibility