Prepends and appends
Most form controls accept a prepend and append prop that allows passing a string or single node. These are great for demarcating the input's metric like "px" or "ms".
Use the dedicated EuiFormPrepend and EuiFormAppend components to pass the content and ensure expected styling. Where needed, you can wrap also wrap those components with other container components like EuiPopover or EuiToolTip. Simple string content will automatically be wrapped into EuiFormPrepend or EuiFormAppend.
You can render the prepend and append content as interactive button element by setting element="button" on EuiFormPrepend and EuiFormAppend and passing onClick as handler.
prepend and append only support single interactions.
Semantic label relations
For non-interactive prepend and append the content is rendered as <label> element.
HTML form elements (e.g. <input> or <textarea>) require a label for accessibility. If the prepend or append content is non-interactive, it will be rendered as a <label> element.
To link form components and their labels, pass id to EuiFormControlLayout or any form component and set the same id as inputId on the EuiFormPrepend or EuiFormAppend component.
When passing id to EuiFormControlLayout or a base, single-control EUI form component like EuiFieldText or EuiFieldNumber that renders a EuiFormControlLayout internally (when controlOnly={false}),
the inputId on EuiFormPrepend and EuiFormAppend is automatically set to the same value.
If you're using both prepend and append but don't want both linked as label, use inputId="" on either EuiFormPrepend or EuiFormAppend to unset one of them.
Props
EuiFormPrepend
Prop | Description and type | Default value |
|---|---|---|
Prop isDisabled# | Description and type Type: boolean | 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 label# | Description and type Main content label ReactNode | Default value |
Prop iconLeft# | Description and type Left side icon IconType | Default value |
Prop iconRight# | Description and type Right side icon IconType | Default value |
Prop children# | Description and type Optional content that will be appended to ReactNode | Default value |
Prop inputId# | Description and type id of the input element that the form label is linked to via string | Default value |
Prop compressed# | Description and type Renders the element with smaller height and padding boolean | Default value |
Prop element# | Description and type Defines the rendered HTML element "button" | "div" | Default value div |
EuiFormAppend
Prop | Description and type | Default value |
|---|---|---|
Prop isDisabled# | Description and type Type: boolean | 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 label# | Description and type Main content label ReactNode | Default value |
Prop iconLeft# | Description and type Left side icon IconType | Default value |
Prop iconRight# | Description and type Right side icon IconType | Default value |
Prop children# | Description and type Optional content that will be appended to ReactNode | Default value |
Prop inputId# | Description and type id of the input element that the form label is linked to via string | Default value |
Prop compressed# | Description and type Renders the element with smaller height and padding boolean | Default value |
Prop element# | Description and type Defines the rendered HTML element "button" | "div" | Default value div |