Skip to content
Home

Field.Password#

Info
Demos
Properties
Events

Import#

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.Password />)

Description#

Field.Password is a wrapper component for the input of strings, with user experience tailored for passwords. The input also comes with a button to toggle the password visibility.

It supports the HTML autocomplete attribute, and by default set it to current-password. Consider setting autocomplete to new-password when it's expected that the user should enter a new password.

Relevant links#

Validation#

By default it has no validation. But you can enable it by giving a required, pattern, schema, onChangeValidator or onBlurValidator property with the needed validation. More about validation in the Getting Started section.

Demos#

Placeholder#

<Field.Password
  placeholder="Please enter your password"
  onChange={(value) => console.log('onChange', value)}
  onHidePassword={(event) => console.log('onHidePassword', event)}
  onShowPassword={(event) => console.log('onShowPassword', event)}
/>

Label#

<Field.Password
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  onHidePassword={(event) => console.log('onHidePassword', event)}
  onShowPassword={(event) => console.log('onShowPassword', event)}
/>

Label and value#

<Field.Password
  label="Label text"
  value="password123"
  onChange={(value) => console.log('onChange', value)}
  onHidePassword={(event) => console.log('onHidePassword', event)}
  onShowPassword={(event) => console.log('onShowPassword', event)}
/>

With help#

<Field.Password
  onChange={(value) => console.log('onChange', value)}
  onHidePassword={(event) => console.log('onHidePassword', event)}
  onShowPassword={(event) => console.log('onShowPassword', event)}
  help={{
    title: 'Help is available',
    content:
      'Helping others, encouraging others, are often acts of being kind that have more meaning that you may realize.',
  }}
/>

Disabled#

<Field.Password
  value="password123"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  onHidePassword={(event) => console.log('onHidePassword', event)}
  onShowPassword={(event) => console.log('onShowPassword', event)}
  disabled
/>

Error#

This is what is wrong...
<Field.Password
  value="your-birthday"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  onHidePassword={(event) => console.log('onHidePassword', event)}
  onShowPassword={(event) => console.log('onShowPassword', event)}
  error={new Error('This is what is wrong...')}
/>

Validation - Required#

<Field.Password
  onChange={(value) => console.log('onChange', value)}
  onHidePassword={(event) => console.log('onHidePassword', event)}
  onShowPassword={(event) => console.log('onShowPassword', event)}
  required
  validateInitially
/>

Validation - Pattern#

<Field.Password
  value="password123"
  pattern="\w{8}[0-9]{2}"
  onChange={(value) => console.log('onChange', value)}
  onHidePassword={(event) => console.log('onHidePassword', event)}
  onShowPassword={(event) => console.log('onShowPassword', event)}
  required
/>
Suggest an edit