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.
Keep in mind that EuiFormRow controls the id of its wrapped child form component to associate it with the label and help 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 "horizontal" | "vertical" | "none" | "both" | Default value vertical |
Prop inputRef# | Description and type Type: Ref<HTMLTextAreaElement> | Default value |