Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Input
  3. Accessibility
  4. Required Fields

Input

Required Fields

Required Fields
Communicate required fields to all users.
aria-required
Use both required and aria-required attributes.
Visual Indicators
If using visual indicators for required fields, explain them.
Icon Accessibility
Ensure icons enhance rather than hinder accessibility.
Decorative Icons
Most input icons are decorative and don't need labels.
The icon's purpose is conveyed by the label or context.
Interactive Icons
If icons are interactive (e.g., password visibility toggle), provide accessible labels.
FieldType.Password owns the reveal control and its name. Do not put a trailing icon on Input.
Number Input Quirks
The native number input's spinner buttons are inconsistent across browsers and can be difficult to target. For a quantity, use NumberField. A currency select beside the amount is not a component; use Field for the amount and Select for the currency.
Input Masking and Formatting
Ensure masked inputs remain accessible.
Screen Reader Compatibility
Masking is compatible with screen readers, which announce the formatted value.
Raw Value Access
When submitting forms, use raw values for processing.
Select Control Accessibility
Ensure integrated select controls are accessible.
Label Association
Select controls inherit label association from the parent input. A select beside an input is not Field. Put Select and Field next to each other. FieldType.InputWithSelect is not implemented.
Keyboard Navigation
Users can tab between the select and input independently.
North American numbers use FieldType.Tel. An international country select is not built. Users can:
  • Tab to the select control and use arrow keys to change selection
  • Tab to the input field and type normally
  • Navigate through all controls in logical order
Disabled and Read-Only States
Communicate non-editable states properly.
Disabled Inputs
Disabled inputs are removed from tab order and announced as disabled.
Read-Only Inputs
Read-only inputs remain focusable but not editable.
Form Validation Patterns
Implement accessible form validation.
Progressive Validation
Validate fields after users complete them, not during typing.
Form Submission Errors
Announce form-level errors and move focus to the first error.
Previous
Accessibility / Error Handling and Validation
Next
Accessibility / Color and Contrast
On this page
Required Fields
aria-required
Visual Indicators
Icon Accessibility
Decorative Icons
Interactive Icons
Number Input Quirks
Input Masking and Formatting
Screen Reader Compatibility
Raw Value Access
Select Control Accessibility
Label Association
Keyboard Navigation
Disabled and Read-Only States
Disabled Inputs
Read-Only Inputs
Form Validation Patterns
Progressive Validation
Form Submission Errors