Password field

Wrap your form controls in a form row

Use the

EuiFormRow component to easily and accessibly associate form components with labels, help text, and error text.

Use a EuiFieldPassword to allow users to enter a password. By default, it renders a basic HTML

<input type="password"> where the content is obfuscated. When users type in the field the characters are presented as asterisks.

Loading...

Showing passwords

You can allow users to toggle between showing and obfuscating the password by passing the type="dual" prop. This option makes the experience more user-friendly and accessible.

Loading...

Props

EuiFieldPassword

Extends InputHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop isInvalid# ↦	Description and type Type: boolean ↦	Default value ↵
Prop fullWidth# ↦	Description and type Expand to fill 100% of the parent. Defaults to fullWidth prop of <EuiForm>. Type: boolean ↦	Default value false ↵
Prop isLoading# ↦	Description and type Type: boolean ↦	Default value ↵
Prop compressed# ↦	Description and type Type: boolean ↦	Default value ↵
Prop inputRef# ↦	Description and type Type: Ref<HTMLInputElement> ↦	Default value ↵
Prop prepend# ↦	Description and type Creates an input group with element(s) coming before input. string | ReactElement or an array of these Type: PrependAppendType ↦	Default value ↵
Prop append# ↦	Description and type Creates an input group with element(s) coming after input. string | ReactElement or an array of these Type: PrependAppendType ↦	Default value ↵
Prop value# ↦	Description and type Type: string | number ↦	Default value ↵
Prop type# ↦	Description and type Change the type of input for manually handling obfuscation. The dual option adds the ability to toggle the obfuscation of the input by adding an icon button as the first append element Type: "text" | "password" | "dual" ↦	Default value password ↵
Prop dualToggleProps# ↦	Description and type Additional props to apply to the dual toggle. Extends EuiButtonIcon Type: Partial<EuiButtonIconPropsForButton> ↦	Default value ↵

𐘂𐘂