Design SystemComponents
Input
Let users enter and edit a single line of text.
Work in progress
This section is not defined in the Dr. Max Design System library (design.drmax.eu) yet. See the Developer tab for usage.
The component renders a native <input> associated with its visible label, so clicking the label focuses the field and screen readers announce it. A stable ID is generated when the id prop is omitted, and extra ARIA attributes can be forwarded via the accessibility prop.
Validation errors set aria-invalid on the input and link the rendered messages via aria-describedby, so assistive technology announces them together with the field. The password visibility toggle announces its state through a live region (password-visible-message / password-hidden-message).