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

Loading...

Semantic label relations

HTML form elements (e.g. <input> or <textarea>) require a label for accessibility.

If you're wrapping your component in a EuiFormRow with label prop, the label is automatically linked to the wrapped form control. If your using a standalone form component (without wrapping** EuiFormRow)** you'll need to manually ensure the form control has an accessible label.

To ensure the form control has an accessible label, you can pass id on EuiFormControlLayout (or a form control like EuiFieldText or EuiFieldNumber that renders a EuiFormControlLayout internally when using it with controlOnly={false}). This renders non-interactive prepend or append content automatically as semantically linked <label> element. You can also use inputId on EuiFormPrepend or EuiFormAppend to link the content as label to a specific form control.

If you're using both prepend and append but don't want both automatically linked as label when passing id, use inputId="" on either EuiFormPrepend or EuiFormAppend to unset one of them.

Linked label

Additional text

✄𐘗
ts code block:
✄𐘗  <EuiFieldText
    id="input-id"
    placeholder="Text field"
    prepend={<EuiFormPrepend label="Linked label" />}
    append={
      <EuiFormAppend
        label="Additional text"
        inputId=""
      />
    }
  />

If you don't pass an id, the non-interactive prepend and append content will then be rendered as a simple, non-linked <span> element. To ensure your form control has an accessible label anyway, pass an aria-label or aria-labelledby to the form control (e.g. EuiFieldText or EuiFieldNumber).

Custom linked label

Non-linked text

✄𐘗
ts code block:
✄𐘗  <EuiFieldText
    placeholder="Text field"
    prepend={<EuiFormPrepend label="Custom linked label" id="prepend-id" />}
    aria-labelledby="prepend-id"
  />

  <EuiFieldText
    placeholder="Text field"
    prepend={<EuiFormPrepend label="Non-linked text" />}
    aria-label="Input label"
  />

Props

EuiFormPrepend

Extends ButtonHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

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. @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 label# ↦	Description and type Main content label Type: ReactNode ↦	Default value ↵
Prop iconLeft# ↦	Description and type Left side icon Type: IconType ↦	Default value ↵
Prop iconRight# ↦	Description and type Right side icon Type: IconType ↦	Default value ↵
Prop children# ↦	Description and type Optional content that will be appended to label and icons Type: ReactNode ↦	Default value ↵
Prop inputId# ↦	Description and type id of the input element that the form label is linked to via htmlFor attribute Type: string ↦	Default value ↵
Prop compressed# ↦	Description and type Renders the element with smaller height and padding Type: boolean ↦	Default value ↵
Prop element# ↦	Description and type Defines the rendered HTML element Type: "button" | "div" ↦	Default value div ↵

𐘂𐘂

EuiFormAppend

Extends ButtonHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

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. @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 label# ↦	Description and type Main content label Type: ReactNode ↦	Default value ↵
Prop iconLeft# ↦	Description and type Left side icon Type: IconType ↦	Default value ↵
Prop iconRight# ↦	Description and type Right side icon Type: IconType ↦	Default value ↵
Prop children# ↦	Description and type Optional content that will be appended to label and icons Type: ReactNode ↦	Default value ↵
Prop inputId# ↦	Description and type id of the input element that the form label is linked to via htmlFor attribute Type: string ↦	Default value ↵
Prop compressed# ↦	Description and type Renders the element with smaller height and padding Type: boolean ↦	Default value ↵
Prop element# ↦	Description and type Defines the rendered HTML element Type: "button" | "div" ↦	Default value div ↵

𐘂𐘂