Password Field

The cc-password-field is a specialized input field designed for securely entering passwords. By default, the input is masked, ensuring that the characters are not visible as they are typed. However, on mobile devices, there is a brief moment where the last typed letter is momentarily shown. To address this, an optional reveal button can be added, allowing users to toggle the masking of the password input. This provides an additional layer of control and security, ensuring that the password remains hidden from prying eyes.

<cc-password-field label="Password" value="Ex@mplePassw0rd"></cc-password-field>

Reveal Button

This nifty little feature grants users the power to temporarily disable the masking of their password input, allowing them to see the characters they’ve entered. It’s a real game-changer, especially on those pesky mobile devices where typing errors are more likely to occur. But hey, we get it, not everyone wants this level of transparency. So fear not, for the Reveal Button can be easily disabled if it doesn’t align with your preferences. It’s all about giving you the control and flexibility you deserve. Happy revealing!

<cc-password-field 
  label="Password" 
  value="Ex@mplePassw0rd" 
  reveal-button-hidden
></cc-password-field>

Placeholder

<cc-password-field label="Password" placeholder="Password"></cc-password-field>

Helper Text

<cc-password-field 
  label="Password" 
  helper-text="6 to 12 characters. Only letters A-Z and numbers supported."
></cc-password-field>

Required

To ensure clarity, it’s a good practice to mark required fields with an indicator placed next to the label. This visual cue helps users identify which fields are mandatory.

When a required field is left empty after being focused, it should be marked as invalid. To provide clear guidance, it’s necessary to manually include an error message explaining that the field is required. This helps users understand why their input is not being accepted and prompts them to provide the necessary information.

To further enhance the user experience, consider including an instruction text at the top of the form. This text can explain the purpose of the required indicator and provide additional context for users. It’s a helpful way to ensure that users are aware of the significance of the indicator and understand its implications.

<cc-password-field label="Full name" required></cc-password-field>

Read-Only & Disabled

When it comes to displaying values, setting fields to read-only mode is a smart move. This prevents accidental editing while still allowing users to interact with the field. Read-only fields are not only visible to screen readers, but they can also display helpful tooltips. Plus, users can easily select and copy the values, making it a cc to work with.

Now, let’s shift our focus to those unavailable fields. When a field is currently off-limits, disabling it is the way to go. Disabled fields have a reduced contrast, which makes them unsuitable for displaying information. They can’t be focused or show tooltips, and they’re invisible to screen readers. On top of that, their values cannot be selected or copied. However, disabled fields can still be handy in situations where they can become enabled based on user actions. But hey, if there’s absolutely nothing users can do to make them editable, consider hiding those fields entirely for a cleaner interface.

<!-- readonly -->
<cc-password-field label="Readonly" value="Ex@mplePassw0rd" readonly></cc-password-field>
<!-- disabled -->
<cc-password-field label="Disabled"  disabled></cc-password-field>

Pattern

If you require a pattern from password field, to ensure a smooth user experience, it’s important to clearly communicate the password requirements to the user. Use helper-text attribute to achieve that. Clear and concise communication fosters a positive user experience and encourages users to create strong and secure passwords.

<form action="/form-submit">
  <cc-password-field 
    label="Password" 
    pattern="[A-Za-z0-9]+" 
    helper-text="Only letters A-Z and numbers supported." 
    required
  ></cc-password-field>
  <cc-button theme="primary" type="submit">Get Started</cc-button>
</form>

Min & Max Length

The input will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long.

The input will fail constraint validation if the length of the text entered into the field is greater than maxlength UTF-16 code units long.

It’s important to clearly communicate the password requirements to the user. Use helper-text attribute to achieve that.

<form action="/form-submit">
  <cc-password-field 
    label="Password" 
    pattern="[A-Za-z0-9]+" 
    helper-text="Only letters A-Z and numbers supported." 
    required
    minlength="6" 
    maxlength="12"
  ></cc-password-field>
  <cc-button theme="primary" type="submit">Get Started</cc-button>
</form>