---
name: 'Field: Password'
route: /components/common/forms/form-field-password
menu: Forms
edit: false
---

import { Playground, Props } from 'docz'
import { State, Toggle } from 'react-powerplug'
import FormFieldPassword from './form-field-password'
import FormPasswordStrengthMeter from './form-password-strength-meter'

# FormFieldPassword
**SUBCATEGORY:** Forms

<hr />

## Password field
### Description
For a password value. Browsers obscure the password; the strength meter and show or hide functionality are custom.

**Default**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldPassword
        {...state}
        labelText="Label"
        maxLength={30}
        onChange={e => {
          setState({ value: e.target.value})
          }
        }
      />
    )}
  </State>
</Playground>

**Validation**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldPassword
      {...state}
      labelText="Label"
      labelTag="Tag"
      maxLength={30}
      meterValue={state.value.length}
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

**Disabled**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldPassword
      {...state}
      disabled
      labelText="Label"
      labelTag="Tag"
      maxLength={30}
      meterValue={state.value.length}
      onChange={e => setState({ value: e.target.value })}
    />
  )}
  </State>
</Playground>

**Helper**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldPassword
      {...state}
      labelText="Label"
      maxLength={30}
      meterValue={state.value.length}
      onChange={e => setState({ value: e.target.value })}
      placeholder="Text placeholder"
   />
  )}
  </State>
</Playground>

<hr />

## Password field (slim)
### Description
For a password value. Browsers obscure the password; the strength meter and show or hide
functionality are custom. Use where inputs are nested or constrained by layout.

<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
    <FormFieldPassword
      {...state}
      labelText="Label"
      maxLength={30}
      onChange={e => setState({ value: e.target.value })}
      slim
    />
    )}
  </State>
</Playground>

<hr />

## ## Password field properties
<Props of={FormFieldPassword} />