Overview

Key Features

• Input Type: Text input with stepper controls for increment/decrement.
• Field Labels: Includes label, description text, and required indicator.
• Icons: Can include a leading icon.
• Accessibility: Fully keyboard navigable and screen-reader accessible.

Anatomy

1. Field label (optional): Provides context for the input, guiding users on what to enter.
2. Input field: The main interactive area where users manually enter or select a time value. It expands to fill its container up to a maximum width of 480 px; for wider layouts, enable the fluid prop.
3. Description text (optional): Additional guidance or instructions related to the input, such as formatting hints or limitations.
4. Incremental controls: Allow users to adjust the value by increasing or decreasing it using up and down arrows.

Look and Feel

States

States define how the component behaves and appears in different interactions:

• Default: The standard appearance when inactive.
• Hover: Highlights the field when the user hovers over it.
• Focus: Indicates active input with a visible focus indicator.
• Disabled: Prevents interaction and input, appearing visually subdued.
• Read-only: Displays content without allowing edits while maintaining a standard appearance.

Errors

Errors communicate invalid input through clear visual cues to help users correct mistakes. We use a red border around the input field, an error icon to indicate the issue, and an error message displayed below the field to provide further guidance.

Success

Success feedback indicates valid input through clear visual cues, ensuring users recognize correct entries. We use a green outline around the input field, a success icon to reinforce confirmation.

Best Practice

Do:

• Use clear labels to specify the type of numerical input required, such as quantity or limit.
• Set input constraints like minimum and maximum values to prevent invalid entries.
• Specify valid input formats if constraints are applied to guide users and prevent errors.

Don’t:

• Don’t include unnecessary details that don’t enhance the user experience, such as “Type a numeric value using your keyboard.”
• Don’t assume users know restrictions—clearly state limits, like “Maximum 500 entries allowed.”

Links

The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.

Feedback

Have feedback, an idea, or a bug to report? Head over to our Contributions page.