Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsUtilitiesPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
  • Navigation
  • Display
  • Forms
    • Form layouts
    • Text controls
      • Text
      • Inline edit
      • Password field
    • Numeric controls
    • Selection controls
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Data grid
  • Tables
  • Templates
  • Editors and syntax
  • EUI
  • Forms
  • Text controls
  • Password field

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

Usage

Labels

Avoid long labels, but don't sacrifice clarity. If needed, put additional information in help text and tooltips.

Use the `major.minor` format. You can use wildcards `*` to span over multiple versions.

Do: Say what the field is in the label. Use help text for additional information.

Don't: Put everything in the label. It's hard to scan.

Hint text

Place hints and instructions outside a text field so it is always visible to the user. Keep the hint text short, maximum two sentences long. Use hint text to:

  • Explain why you are asking a certain question: "We will only email you if there is a problem with your order."
  • Provide clarifying details on what to type: "Enter the full 32-character ID."
  • Tell the user where to find the information you're asking for: "Find the Elasticsearch cluster ID on the main administration page of your deployment."
Use shorthand notation, such as 30s, 10m, or 1h.

Do: Help users make the right decision by clarifying what goes inside a field.

This is the name that will be visible to other users.

Do: Use complete sentences and ending punctuation.

Placeholder text

In fields

Use the placeholder property to describe the expected value of the input or to provide a useful example.

Include the international call prefix.

Do: Provide a simple example that highlights the expected syntax or value.

Include the port number.

Don't: Start with `for example`, or `e.g.`.

Add placeholder text in addition to field labels and help text, not as a replacement. Omit it if it doesn't add value for users. And keep it short.

Enter a valid IP address.

Do: Place info essential to completing the form outside the field so that it is always visible.

Enter CIDR or IP address. For example, `192.168.132.6/22`.

Don't: Use text that adds no value, such as “Type here”.

Do: When space is limited and the UI is very simple, you can use field labels as placeholder text. This must stay an exception.

Do: If space allows it, prefer following the rule described earlier with labels outside of the fields.

In search bars

In a search bar, be specific about what users can enter.

Do: Give users a hint at things they might want to search for. State the action the user performs (find, search) instead of the field functionality (jump to).

Don't: Use an ellipsis.

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
↵
𐘂𐘂
Edit this page

Previous
Inline edit
Next
Number
  • Showing passwords
  • Usage
    • Labels
    • Hint text
    • Placeholder text
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic