Skip to main content

Password

The characters in a password field are masked, allowing users to input a secure code or password.

Example

Password on a default theme

Best practices

Example usages are user authentication to prove identity or access approval (to gain access to a resource, which should be kept secret from those not allowed access).

Do

  • We recommend using hint text in the input field.
  • Use in the same contexts as you would use text-field with the added need for security.
  • Use in conjunction with other elements (i.e. form elements, submit button, etc.)
  • When asking the user for a new password, always have a second password component used to confirm the first entry.

Don’t

  • Don’t overuse this component, it should be a rare occurrence.

Also known as

Password box

Related

Label
Text-field

Accessibility

  • Valid markup requires password to be used inside a form with a submit button.

Options

  • The passwords can have any variation of the following html attributes: autofocus, disabled, required, read-only, and with placeholder text.

  • Small: Add a class named f-small to have a small password box with the width of 88px. Use this for fields where smaller strings are expected.

  • Flex: Add a class named f-flex to have the password box snap to the full width of the container or nearest column.

Development

  • Schema definition: The password schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default password

<label class="c-label" for="default">Label</label>
<input class="c-password" type="password" name="default">

Default small password

<label class="c-label" for="defaultSmall">Label</label>
<input class="c-password f-small" type="password" name="defaultSmall">

Default flex password

<label class="c-label" for="defaultFlex">Label</label>
<input class="c-password f-flex" type="password" name="defaultFlex">

Password with auto-focus

<label class="c-label" for="autoFocus">Label</label>
<input class="c-password" type="password" name="autoFocus" autofocus>

Disabled password

<label class="c-label" for="disabled">Label</label>
<input class="c-password" type="password" name="disabled" disabled="disabled">

Password with value

<label class="c-label" for="withValue">Label</label>
<input class="c-password" type="password" name="withValue" value="value">

Password required

<label class="c-label" for="required">Label</label>
<input class="c-password" type="password" name="required" required>

Password read-only

<label class="c-label" for="readonly">Label</label>
<input class="c-password" type="password" name="readonly" readonly="readonly" value="Read only">

Password with placeholder

<label class="c-label" for="placeholder">Label</label>
<input class="c-password" type="password" name="placeholder" placeholder="Placeholder">