@dnb/eufemia

--- title: 'Field.Password' description: '`Field.Password` is a wrapper component for the input of strings, with user experience tailored for passwords.' version: 10.104.0 generatedAt: 2026-04-17T18:46:12.737Z checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40 --- # Field.Password ## Import ```tsx import { Field } from '@dnb/eufemia/extensions/forms' render(<Field.Password />) ``` ## Description `Field.Password` is a wrapper component for the [input of strings](/uilib/extensions/forms/base-fields/String), with user experience tailored for passwords. The input also comes with a button to toggle the password visibility. It supports the HTML [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/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 - [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/extensions/forms/Field/Password) - [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Password) ## 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](/uilib/extensions/forms/getting-started/#validation-and-error-handling) section. ## Demos ### Placeholder ```tsx render( <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 ```tsx render( <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 ```tsx render( <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 ```tsx render( <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 ```tsx render( <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 ```tsx render( <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 ```tsx render( <Field.Password value="pass" onChange={(value) => console.log('onChange', value)} onHidePassword={(event) => console.log('onHidePassword', event)} onShowPassword={(event) => console.log('onShowPassword', event)} required /> ) ``` ### Validation - Pattern ```tsx render( <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 /> ) ``` ## Properties ### Field-specific properties ```json { "props": { "multiline": { "doc": "True to be able to write in multiple lines (switching from input-element to textarea-element).", "type": "boolean", "status": "optional" }, "leftIcon": { "doc": "For icon at the left side of the text input. Only one of `leftIcon` or `rightIcon` can be used at the same time.", "type": "string", "status": "optional" }, "rightIcon": { "doc": "For icon at the right side of the text input. Only one of `leftIcon` or `rightIcon` can be used at the same time.", "type": "string", "status": "optional" }, "capitalize": { "doc": "When set to true, it will capitalize the first letter of every word, transforming the rest to lower case.", "type": "boolean", "status": "optional" }, "trim": { "doc": "When true, it will trim leading and trailing whitespaces on blur, triggering `onChange` if the value changes.", "type": "boolean", "status": "optional" }, "inputMode": { "doc": "Define an [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", "type": "string", "status": "optional" }, "autoComplete": { "doc": "For HTML [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attributes.", "type": ["on", "string"], "status": "optional" }, "minLength": { "doc": "Validation for minimum length of the text (number of characters).", "type": "number", "status": "optional" }, "maxLength": { "doc": "Validation for maximum length of the text (number of characters).", "type": "number", "status": "optional" }, "pattern": { "doc": "Validation based on regex pattern for the number field e.g. `pattern=\"w{8}d{4}\"`.", "type": "string", "status": "optional" }, "width": { "doc": "`false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` to fill available width.", "type": ["string", "false"], "status": "optional" }, "size": { "doc": "The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size=\"2\" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).", "type": ["string", "number"], "status": "optional" }, "align": { "doc": "Defines the text alignment of the input. Can be `left`, `right` or `center`. Defaults to `left`.", "type": "string", "status": "optional" }, "selectall": { "doc": "If set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position.", "type": "boolean", "status": "optional" }, "clear": { "doc": "If set to `true`, then a clear button will be shown which lets the user clear any given input value.", "type": "boolean", "status": "optional" }, "keepPlaceholder": { "doc": "Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus.", "type": "boolean", "status": "optional" }, "rows": { "doc": "To be used together with `multiline`. Set how many rows of text can be shown by default. Defaults to `2`.", "type": "number", "status": "optional" }, "autoresizeMaxRows": { "doc": "To be used together with `multiline`. Set how many rows of text can be shown at max. Defaults to `6`.", "type": "number", "status": "optional" }, "characterCounter": { "doc": "To be used together with `multiline`. Use a number to define the displayed max length e.g. `40` or `{ max: 40, variant: 'down' }`.", "type": ["number", "object"], "status": "optional" }, "autoresize": { "doc": "To be used together with `multiline`. Set true to expand when writing longer texts. Defaults to `true`.", "type": "boolean", "status": "optional" }, "inputClassName": { "doc": "Class name set on the <input> DOM element.", "type": "string", "status": "optional" }, "innerRef": { "doc": "`ElementRef` passed on to the password `input` element.", "type": "React.RefObject", "status": "optional" }, "submitElement": { "doc": "Accepts a React element which will show up like the \"submit button\" would do on type=\"search\".", "type": "React.Element", "status": "optional" }, "[Space](/uilib/layout/space/properties)": { "doc": "Spacing properties like `top` or `bottom` are supported.", "type": ["string", "object"], "status": "optional" } } } ``` ### General properties ```json { "props": { "value": { "doc": "Source data value for the field. Will take precedence over the path value given in the data context.", "type": "{valueType}", "status": "optional" }, "defaultValue": { "doc": "Default source data value for the field. Will not take precedence over the path value given in the data context.", "type": "{valueType}", "status": "optional" }, "path": { "doc": "JSON Pointer for where the data for the field is located in the source dataset (when using Form.Handler or DataContext). The `path` will also be set as the `name` attribute for the [string](/uilib/extensions/forms/base-fields/String/)-field.", "type": "string", "status": "optional" }, "info": { "doc": "Info message shown below / after the field by default. Use `statusPosition=\"above\"` to show status messages above the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with `{ conditionally, getValueByPath, getFieldByPath }`. To show the message first after the user has interacted with the field, you can call and return `conditionally` function with a callback and with options: `conditionally(() => 'Your message', { showInitially: true })`", "type": ["React.Node", "Array<React.Node>", "function"], "status": "optional" }, "warning": { "doc": "Warning message shown below / after the field by default. Use `statusPosition=\"above\"` to show status messages above the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with `{ conditionally, getValueByPath, getFieldByPath }`. To show the message first after the user has interacted with the field, you can call and return `conditionally` function with a callback and with options: `conditionally(() => 'Your message', { showInitially: true })`", "type": ["React.Node", "Array<React.Node>", "function"], "status": "optional" }, "error": { "doc": "Error message shown below / after the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with `{ conditionally, getValueByPath, getFieldByPath }`. To show the message first after the user has interacted with the field, you can call and return `conditionally` function with a callback and with options: `conditionally(() => 'Your message', { showInitially: true })`", "type": [ "Error", "FormError", "Array<Error | FormError>", "function" ], "status": "optional" }, "disabled": { "doc": "Set `true` to show the field but without the possibility of changing the value.", "type": "boolean", "status": "optional" }, "emptyValue": { "doc": "The value to use (in `onChange` events etc) when emptying the field. Makes it possible for instance to provide `undefined` instead of an empty string when clearing the content of a text input.", "type": ["{valueType}", "undefined"], "status": "optional" }, "required": { "doc": "When set to `true`, the field will give an error if the value fails the required validation. When set to `false`, the field will not be required, but will add a \"(optional)\" suffix to the label.", "type": "boolean", "status": "optional" }, "labelSuffix": { "doc": "Will append an additional text to the label, like \"(optional)\". When using `inheritLabel`, the suffix will not be inherited. NB: The visual appearance of the `labelSuffix` may change in the future.", "type": "React.Node", "status": "optional" }, "schema": { "doc": "Custom JSON Schema for validating the value.", "type": "object", "status": "optional" }, "validateInitially": { "doc": "Set to `true` to show validation based errors initially (from given value-prop or source data) before the user interacts with the field.", "type": "boolean", "status": "optional" }, "validateUnchanged": { "doc": "Set to `true` to show validation based errors when the field is touched (like focusing a field and blurring) without having changed the value. Since the user did not introduce a new error, this will apply when the value was initially invalid based on validation.", "type": "boolean", "status": "optional" }, "validateContinuously": { "doc": "Set to `true` to show validation based errors continuously while writing, not just when blurring the field.", "type": "boolean", "status": "optional" }, "errorMessages": { "doc": "Custom error messages for each type of error, overriding default messages. The messages can be a React.ReactNode or a string.", "type": "object", "status": "optional" }, "onChangeValidator": { "doc": "Custom validator function where you can return `undefined`, `Error`, `FormError` or an Array with either several other validators or several `Error` or `FormError`. It is triggered on every change done by the user. The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }.", "type": "function", "status": "optional" }, "onBlurValidator": { "doc": "Custom validator function where you can return `undefined`, `Error`, `FormError` or an Array with either several other validators or several `Error` or `FormError`. It is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }.", "type": "function", "status": "optional" }, "transformIn": { "doc": "Transforms the `value` before its displayed in the field (e.g. input).", "type": "function", "status": "optional" }, "transformOut": { "doc": "Transforms the value before it gets forwarded to the form data object (context) or returned as the `onChange` value parameter. The first parameter is the internal value. Some fields do support a second parameter, like the SelectCountry, where the country object is given.", "type": "function", "status": "optional" }, "label": { "doc": "Label text displayed above the field. Most fields already have a default label, so check the field translations for an existing label entry. Only set `label` when you need to override the default.", "type": "string", "status": "optional" }, "labelDescription": { "doc": "A more discreet text displayed beside the label (i.e for \"(optional)\").", "type": "string", "status": "optional" }, "labelDescriptionInline": { "doc": "If true, the `labelDescription` will be displayed on the same line as the label.", "type": "boolean", "status": "optional" }, "labelSrOnly": { "doc": "Use `true` to make the label only readable by screen readers.", "type": "boolean", "status": "optional" }, "labelSize": { "doc": "Define the font-size of the label based on the [font-size](/uilib/typography/font-size/) table.", "type": ["medium", "large"], "status": "optional" }, "help": { "doc": "Provide help content for the field using `title` and `content` as a string or React.Node. Additionally, you can set `open` to `true` to display the inline help, set the `breakout` property to `false` to disable the breakout of the inline help content, set `outset` to `false` to display the help text inline (inset) instead of the default outset behavior, or use `renderAs` set to `dialog` to render the content in a [Dialog](/uilib/components/dialog/) (recommended for larger amounts of content).", "type": "object", "status": "optional" }, "hideHelpButton": { "doc": "Set `true` when you render the inline help button outside the label (e.g. inside a checkbox suffix) so FieldBlock skips drawing the default label help button.", "type": "boolean", "status": "optional" }, "statusPosition": { "doc": "Controls where status messages (`error`, `warning`, `info`) are visually shown. Use `below` (default) or `above`.", "type": ["\"below\"", "\"above\""], "status": "optional" }, "layout": { "doc": "Layout for the label and input. Can be `horizontal` or `vertical`.", "type": "string", "status": "optional" }, "layoutOptions": { "doc": "Use this to set additional options for the `horizontal` layout. E.g. `{ width: \"medium\" }`. You can also use a custom width `{number}rem`. Instead of a width, you can use a min/max width. E.g. `{ minWidth: \"6rem\", maxWidth: \"12rem\" }`.", "type": "object", "status": "optional" }, "width": { "doc": "Will set the width for the whole block. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.", "type": ["string", "false"], "status": "optional" }, "contentWidth": { "doc": "Will set the width for its contents. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.", "type": ["string", "false"], "status": "optional" }, "[Space](/uilib/layout/space/properties)": { "doc": "Spacing properties like `top` or `bottom` are supported.", "type": ["string", "object"], "status": "optional" } } } ``` ## Translations ```json { "locales": ["da-DK", "en-GB", "nb-NO", "sv-SE"], "entries": { "Field.errorPattern": { "nb-NO": "Du må skrive inn en gyldig verdi.", "en-GB": "You must enter a valid value.", "sv-SE": "Du måste ange ett giltigt värde.", "da-DK": "Du skal indtaste en gyldig værdi." }, "Field.errorRequired": { "nb-NO": "Dette feltet må fylles ut.", "en-GB": "This field is required.", "sv-SE": "Detta fält måste fyllas i.", "da-DK": "Dette felt skal udfyldes." }, "Field.errorSummary": { "nb-NO": "Feil som må rettes:", "en-GB": "Please correct the following errors:", "sv-SE": "Fel som måste åtgärdas:", "da-DK": "Felter der skal rettes:" }, "Field.errorSummaryTitle": { "nb-NO": "Feil som må rettes", "en-GB": "Please correct the following errors", "sv-SE": "Fel som måste åtgärdas", "da-DK": "Felter der skal rettes" }, "Field.optionalLabelSuffix": { "nb-NO": "(valgfritt)", "en-GB": "(optional)", "sv-SE": "(valfritt)", "da-DK": "(valgfrit)" }, "Field.stateSummary": { "nb-NO": "Oppsummering:", "en-GB": "Summary:", "sv-SE": "Sammanfattning:", "da-DK": "Oversigt:" }, "Password.ariaLabelHide": { "nb-NO": "Skjul passord", "en-GB": "Hide password", "sv-SE": "Dölj lösenord", "da-DK": "Skjul adgangskode" }, "Password.ariaLabelShow": { "nb-NO": "Vis passord", "en-GB": "Show password", "sv-SE": "Visa lösenord", "da-DK": "Vis adgangskode" }, "Password.errorRequired": { "nb-NO": "Du må fylle inn et passord.", "en-GB": "You must enter a password.", "sv-SE": "Du måste fylla i ett lösenord.", "da-DK": "Du skal udfylde en adgangskode." }, "Password.label": { "nb-NO": "Passord", "en-GB": "Password", "sv-SE": "Lösenord", "da-DK": "Adgangskode" } } } ``` ## Events ```json { "props": { "onChange": { "doc": "Will be called on value changes made by the user, with the new value as argument. When an `async` function is used, the corresponding [FieldBlock](/uilib/extensions/forms/create-component/FieldBlock/) will show an indicator on the field label. You can return `{ success: 'saved' } as const` to show a success symbol, or an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const`. The second parameter is an object that e.g. contains `props` (all given `Field.*` properties).", "type": "(value) => void", "status": "optional" }, "onFocus": { "doc": "Will be called when the component gets into focus. Like clicking inside a text input or opening a dropdown. Called with active value as argument. The second parameter is an object that e.g. contains `props` (all given `Field.*` properties).", "type": "(value) => void", "status": "optional" }, "onBlur": { "doc": "Will be called when the component stop being in focus. Like when going to next field, or closing a dropdown. Called with active value as argument. The second parameter is an object that e.g. contains `props` (all given `Field.*` properties).", "type": "(value) => void", "status": "optional" }, "onStatusChange": { "doc": "Called whenever the status messages (info, warning or error) gets visible or changes. Receives the current `{ info, warning, error }` object.", "type": "({ info?, warning?, error? }: FieldStatus) => void", "status": "optional" } } } ``` ## Password visibility events ```json { "props": { "onShowPassword": { "doc": "Will be called when the user toggles the password to be visible.", "type": "function", "status": "optional" }, "onHidePassword": { "doc": "Will be called when the user toggles the password to be hidden.", "type": "function", "status": "optional" } } } ``` ### Argument value The password visibility event values comes in the shape of an `React.MouseEvent<HTMLButtonElement>`, that contains a `value` property with the `input` value.