Form control layout
EuiFormControlLayout is generally used internally to consistently style form controls, but it’s published in case you want to create your own form control which matches those of EUI. The examples below demonstrate its various states and utilize the
controlOnly and type props of EuiFieldText as the wrapped control.
Delimited layout
Like EuiFormControlLayout, EuiFormControlLayoutDelimited is generally used internally to consistently style form controls. This component specifically lays out two form controls with center text or icon.
It takes all of the same props as EuiFormControlLayout except for children. Instead it requires both a single startControl and a single endControl. You can optionally change the center content to a different string or node (like an EuiIcon).
Props
EuiFormControlLayout
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 prepend# | Description and type Creates an input group with element(s) coming before children. PrependAppendType | Default value |
Prop append# | Description and type Creates an input group with element(s) coming after children. PrependAppendType | Default value |
Prop icon# | Description and type Type: IconType | IconShape | Default value |
Prop iconsPosition# | Description and type Determines whether icons are absolutely or statically rendered. For single inputs, "absolute" | "static" | Default value absolute |
Prop clear# | Description and type Type: EuiFormControlLayoutClearButtonProps | 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 isDisabled# | Description and type Type: boolean | Default value |
Prop compressed# | Description and type Type: boolean | Default value |
Prop readOnly# | Description and type Type: boolean | Default value |
Prop isInvalid# | Description and type Type: boolean | Default value |
Prop isDropdown# | Description and type Controls the adding of and visibility of a down arrow icon boolean | Default value |
Prop inputId# | Description and type Connects the prepend and append labels to the input string | Default value |
Prop wrapperProps# | Description and type Allows passing optional additional props to CommonProps & HTMLAttributes<HTMLDivElement> | Default value |
Prop isDelimited# | Description and type Type: boolean | Default value |
EuiFormControlLayoutDelimited
Prop | Description and type | Default value |
|---|---|---|
Prop startControl# | Description and type Left side control ReactElement | Default value Required |
Prop endControl# | Description and type Right side control ReactElement | Default value Required |
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 prepend# | Description and type Creates an input group with element(s) coming before children. PrependAppendType | Default value |
Prop append# | Description and type Creates an input group with element(s) coming after children. PrependAppendType | Default value |
Prop icon# | Description and type Type: IconType | IconShape | Default value |
Prop iconsPosition# | Description and type Determines whether icons are absolutely or statically rendered. For single inputs, "absolute" | "static" | Default value absolute |
Prop clear# | Description and type Type: EuiFormControlLayoutClearButtonProps | 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 isDisabled# | Description and type Type: boolean | Default value |
Prop compressed# | Description and type Type: boolean | Default value |
Prop readOnly# | Description and type Type: boolean | Default value |
Prop isInvalid# | Description and type Type: boolean | Default value |
Prop isDropdown# | Description and type Controls the adding of and visibility of a down arrow icon boolean | Default value |
Prop inputId# | Description and type Connects the prepend and append labels to the input string | Default value |
Prop wrapperProps# | Description and type Allows passing optional additional props to CommonProps & HTMLAttributes<HTMLDivElement> | Default value |
Prop delimiter# | Description and type The center content. Accepts a string to be wrapped in a subdued EuiText ReactNode | Default value |