Skip to main content


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


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).


  • 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 overuse this component, it should be a rare occurrence.

Also known as

Password box




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


  • 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.


  • 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">