Overview

Key Features

• Field Labels: Includes label, description text, and required indicator.
• Input Type: Filled text input that obscures typed characters.
• Visibility Toggle: Allows users to toggle password visibility.
• Icon Support: 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.
4. Password visibility toggle: Allows users to switch between masked and visible text in a password input field

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 indicate what the password is for, such as “Create Password” or “Enter Current Password.”
• Provide password requirements upfront, such as length, special characters, or case sensitivity.
• Enable copy-paste functionality to support password managers and improve accessibility.
• Use real-time validation to provide immediate feedback on whether the password meets security criteria.

Don’t:

• Don’t use placeholder text for instructions — use helper text or tooltips instead to avoid confusion.

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.