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.

Use EuiTextArea to allow users to enter multi-line text. This component renders a basic HTML <textarea /> element.


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 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. Defaults to `fullWidth` prop of `<EuiForm>`. Type: `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. `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 controlOnly#	Description and type Completely removes form control layout wrapper and ignores icon, prepend, and append. Best used inside EuiFormControlLayoutDelimited. Type: `boolean`	Default value
Prop compressed#	Description and type when `true` creates a shorter height input Type: `boolean`	Default value


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 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 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 compressed#	Description and type Type: `boolean`	Default value
Prop resize#	Description and type Which direction, if at all, should the textarea resize Type: `"none" \| "both" \| "horizontal" \| "vertical"`	Default value `vertical`
Prop inputRef#	Description and type Type: `Ref<HTMLTextAreaElement>`	Default value