Overview

Key Features

• Field Labels: Includes label, description text, and required indicator.
• Accessibility: Fully keyboard 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.

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:

• Provide a clear label that specifies the purpose of the text input (e.g., “Additional Comments” or “Describe your issue”)
• Use placeholder text for guidance, but keep it brief and not a substitute for the label (e.g., “Enter your message here…”).
• Set character limits when necessary and display a counter (e.g., “Max 500 characters remaining”) to help users stay within constraints.

Don’t:

• Don’t rely only on placeholder text for instructions—it disappears when users start typing.
• Don’t make the field too small for expected input—forcing users to scroll excessively is frustrating.

Figma file

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.