ba-input-password

An input field which enables customers to enter a password

 Figma GitHub Storybook

Always use the label attribute to give a meaningful label to the field.

Further reading:

Disabled form elements are not supported in BAgel because they create accessibility challenges, such as preventing keyboard navigation, confusing screen reader users, and reducing visual clarity for those with impairments

Further reading:

Placeholders on inputs are not supported in BAgel because they create accessibility challenges, such as failing to provide persistent labels for screen readers, reducing color contrast for users with visual impairments, and causing confusion for those with cognitive difficulties.

If you would like to add a infomations to help the user fill the input, you can use the hint-text attribute.

Further reading:

Code

Properties & Attributes

Property Attribute Description Type Default
autocomplete autocomplete The autocomplete setting string | undefined 'current-password'
hintText hint-text Hint text to show above the input string | undefined undefined
invalid invalid Whether the input is invalid boolean | undefined false
label (required) label A label for the input string undefined
maxLength max-length Max amount of characters allowed in validation string | undefined undefined
minLength min-length Min amount of characters allowed in validation string | undefined undefined
name name The name of the input string | undefined undefined
required required Whether the input is required boolean | undefined false
value value The value of the input string | undefined ''

Events

Event Description Type
baBlur Emitted when the input loses focus. CustomEvent<void>
baFocus Emitted when the input has focus. CustomEvent<void>
baOnInput Emitted when a keyboard input ocurred. CustomEvent<KeyboardEvent>
baSubmit Emitted when the user submits the form from within the component CustomEvent<void>

Methods

isValid() => Promise<boolean>

An exposed method for triggering the inputs required validation

reset() => Promise<void>

Resets the input back to its initial value

Returns

Type: Promise<void>

Slots

Slot Description Permitted elements
"error" Element will be rendered in the error slot <p>
"error-required" Element will be rendered in the error-required slot <p>
"error-min-length" Element will be rendered in the error-min-length slot <p>
"error-max-length" Element will be rendered in the error-max-length slot <p>
"help" Element will be rendered in the help slot above the hint text <ba‑flex>, <ba‑grid>, <div>

Parent components

ba-input-password can be slotted into:

Usage

Basic usage

A simple password input
<ba-input-password label="Password" name="input-password" required></ba-input-password>

Help text

It is sometimes useful to add hint text.

A password input that has hint text
<ba-input-password label="Password" name="input-password" hint-password="Custom hint text" required></ba-input-password>

Validation

Min/max characters

You can specify a minimum and maximum length of characters.

Specifying a minimum and maximum length of characters
<ba-input-password name="password-input" label="Password" min-length="2" max-length="6"></ba-input-password>

Required

You can set the field to be required

Setting the field as required
<ba-input-password name="password-input" label="Password" required></ba-input-password>

Custom Error messages

BAgel provides error messages with translations for:

  • Required
  • Minimum length of characters
  • Maximum length of characters

These can be customised using slots.

Specifying custom validation errors
<ba-input-password name="password-input" label="Password" required min-length="2" max-length="6">
  <p slot="error-required">Custom required error</p>
  <p slot="error-min">Custom min length error</p>
  <p slot="error-max">Custom max length error</p>
</ba-input-password>

Override all error messages

You can override all error messages with the error slot.

Overriding all error messages
<ba-input-password name="password-input" label="Password" required min-length="2" max-length="6">
  <p slot="error">This will override all error messages</p>
  <p slot="error-required">Custom required error</p>
  <p slot="error-min">Custom min length error</p>
  <p slot="error-max">Custom max length error</p>
</ba-input-password>

Custom validation

You can provide your own custom validation using events and props.

Custom validation
<ba-input-password name="password-input" label="Password" required>
  <p slot="error">Custom error message</p>
</ba-input-password>

<script>
  const passwordEl = document.querySelector('ba-input-password');
  passwordEl.addEventListener('baOnInput', (e) => {
    const value = e.detail.value;

    // Do your custom validation here.
    //
    //
    // Then set the input to invalid
    passwordEl.setAttribute('invalid')
  })
</script>

Show custom validation rules

You can display your own custom validation rules using the new slot. Combine this with custom validation.
A full working example can be found on our storybook at the below link Custom Password Rules

Custom validation rules
<ba-input-password name="password-input" label="Password" required>
  <p slot="error">Custom error message</p>

  <ba-grid slot="help" class="password-rules" row-gutter-320vw="8" aria-live="polite">
    <ba-media-object gutter="8">
      <ba-icon
        slot="media"
        id="passwordLengthIcon"
        name="info"
        size="24"
      ></ba-icon>
      <ba-content>
        <p>
          <span class="ba-u-visually-hidden-text" id="numberLengthText">Password rule incomplete 10 to 20 characters with no spaces</span>
          <span aria-hidden="true">10 to 20 characters with no spaces</span>
        </p>
      </ba-content>
    </ba-media-object>

    <ba-media-object gutter="8">
      <ba-icon
        slot="media"
        id="upperLowercaseIcon"
        name="info"
        size="24"
      ></ba-icon>
      <ba-content>
        <p>
          <span class="ba-u-visually-hidden-text" id="numberCasingText">Password rule incomplete upper and lower case letters</span>
          <span aria-hidden="true">Upper and lower case letters</span>
        </p>
      </ba-content>
    </ba-media-object>

    <ba-media-object gutter="8">
      <ba-icon
        slot="media"
        id="oneNumberIcon"
        name="info"
        size="24"
      ></ba-icon>
      <ba-content>
        <p>
          <span class="ba-u-visually-hidden-text" id="numberHiddenText">Password rule incomplete at least 1 number</span>
          <span aria-hidden="true">At least 1 number</span>
        </p>
      </ba-content>
    </ba-media-object>
  </ba-grid>
</ba-input-password>

<script>
  const passwordEl = document.querySelector('ba-input-password');
  passwordEl.addEventListener('baOnInput', (e) => {
    const value = e.detail.value;

    // Do your custom validation here.
    //
    //
    // Then set the input to invalid
    passwordEl.setAttribute('invalid')
  })
</script>
GitHub Storybook Figma library Version 3 release guide Release history BAgel helper QA process