Input

Accessible inputs ensure all users can successfully enter and edit text data. When using Input and InputWithSelect, follow these best practices.

Ensure inputs are properly labeled for screen readers and assistive technologies.

Always provide visible labels associated with input fields. aria-label-only is a fallback when space is truly gone.

Screen readers announce the label when the input receives focus, providing essential context.

Placeholder text is not a label substitute—it disappears on focus and users with short-term memory or cognitive differences lose the context.

Use the correct type so mobile keyboards and autocomplete behave correctly.

Set autoComplete per field (email, given-name, one-time-code, off) so browsers and password managers offer the right suggestions.

Labels are automatically associated with inputs through the htmlFor and id attributes.

Ensure inputs are fully keyboard accessible.

Inputs participate in normal tab order and display focus indicators.

Users can:

Lead and tail slots are not focusable unless they contain interactive controls (like a Select or IconButton).

Standard text input keyboard shortcuts are supported.

Associate helper text with inputs for screen reader users.

Helper text is automatically associated through aria-describedby.

Screen readers announce the helper text after the label, providing important context before users begin typing.

Format hints (MM/DD/YYYY), constraints (Min 8 characters), and expected examples belong in helperText—not in the placeholder.

Provide additional context when needed.