Function
One labelled input of an account form.
The label is always visible. The hint and the error are both linked to the input through aria-describedby; the error also marks the input aria-invalid and is rendered as an alert, so it is announced when it appears.
aria-describedby
aria-invalid
<AccountField name="email" type="email" label={t("fields.email")} value={email} onChange={setEmail} error={errors.email && t(`validation.${errors.email}`)} /> Copy
<AccountField name="email" type="email" label={t("fields.email")} value={email} onChange={setEmail} error={errors.email && t(`validation.${errors.email}`)} />
One labelled input of an account form.