Sha256: 0930e1ed95d7c9fed76c83013d64971948afd40d5a33a7e3085671dc160d30ba

Contents?: true

Size: 1.96 KB

Versions: 1

Compression:

Stored size: 1.96 KB

Contents

name: Password input
description: The password input component helps users to create and enter passwords.
govuk_frontend_components:
  - password-input

accessibility_criteria: |
  The password input component must:

    * accept focus
    * be focusable with a keyboard
    * be usable with a keyboard
    * be usable with touch
    * indicate when they have focus
    * be recognisable as form input elements
    * have correctly associated labels
    * have the appropriate type of 'password'
    * have an appropriate validation message if there was an error
    * allow users to interact with any 'show password' button
    * allow users to use `autocomplete` to securely create and enter passwords
    * allow users to copy and paste into the password input

  When CSS and / or JavaScript is unavailable, the component must:

  * fallback to a regular input element, with the show/hide button hidden

uses_component_wrapper_helper: true

examples:
  default:
    data:
  with_error:
    description: If there is a validation error, passing error text will style the password input component with error styles, and semantically state that there was a validation error.
    data:
      error_text: Enter a password
  with_custom_label_and_error_text:
    description: For translations or other purposes, the text presented to the user in this component can be changed. Note that the error text prefix is hidden visually and used by assistive tools when there is an error. By default, the prefix is "Error".
    data:
      label_text: Secret number
      error_text_prefix: Incompatible
      error_text: 6 is scared of 7, so they can't be next to each other.
  with_margin_bottom:
    description: |
      The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of `30px`.
    data:
      margin_bottom: 5

Version data entries

1 entries across 1 versions & 1 rubygems

Version Path
govuk_publishing_components-43.1.0 app/views/govuk_publishing_components/components/docs/password_input.yml