Basic text controls
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.
Text field
Use a EuiFieldText to allow users to enter or edit text. This component renders a basic HTML <input type="text"> element.
Textarea
Use EuiTextArea to allow users to enter multi-line text. This component renders a basic HTML <textarea /> element.
Usage
Labels
Avoid long labels, but don't sacrifice clarity. If needed, put additional information in help text and tooltips.
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."
Do: Help users make the right decision by clarifying what goes inside a field.
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.
Do: Provide a simple example that highlights the expected syntax or value.
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.
Do: Place info essential to completing the form outside the field so that it is always visible.
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
EuiFieldText
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. 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 icon# | Description and type Type: IconType | IconShape | Default value |
Prop isInvalid# | Description and type Type: boolean | Default value |
Prop fullWidth# | Description and type Expand to fill 100% of the parent. boolean | Default value false |
Prop isLoading# | 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. PrependAppendType | Default value |
Prop append# | Description and type Creates an input group with element(s) coming after input. PrependAppendType | Default value |
Prop controlOnly# | Description and type Completely removes form control layout wrapper and ignores boolean | Default value |
Prop compressed# | Description and type when boolean | Default value |
EuiTextArea
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. 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 icon# | Description and type Type: IconType | IconShape | Default value |
Prop isLoading# | Description and type Type: boolean | Default value |
Prop isInvalid# | Description and type Type: boolean | Default value |
Prop isClearable# | Description and type Shows a button that allows users to quickly clear the textarea boolean | Default value |
Prop fullWidth# | Description and type Expand to fill 100% of the parent. boolean | Default value false |
Prop compressed# | Description and type Type: boolean | Default value |
Prop resize# | Description and type Which direction, if at all, should the textarea resize "none" | "both" | "horizontal" | "vertical" | Default value vertical |
Prop inputRef# | Description and type Type: Ref<HTMLTextAreaElement> | Default value |