= {
control: 'radio',
options: [undefined, 'icon', 'text'],
mapping: {
- icon: ,
+ icon: ,
text: 'Prepended',
undefined: undefined,
},
diff --git a/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap b/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
index 1e5c28ebbd5..a8fb9bc0566 100644
--- a/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
+++ b/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
@@ -201,12 +201,16 @@ exports[`EuiInlineEditForm edit mode editModeProps.inputProps 1`] = `
{
Dates}
+ prepend="Dates"
startControl={
{
max={100}
defaultValue={10}
compressed
- prepend={[
- ,
- 'kibana_sample_ecommerce_data',
- ]}
+ prepend={}
append="px"
/>
diff --git a/packages/website/docs/components/forms/layouts/controls.mdx b/packages/website/docs/components/forms/layouts/controls.mdx
index e79530a3401..5b84fd72f0e 100644
--- a/packages/website/docs/components/forms/layouts/controls.mdx
+++ b/packages/website/docs/components/forms/layouts/controls.mdx
@@ -17,6 +17,8 @@ import React from 'react';
import {
EuiFormControlLayout,
EuiFormLabel,
+ EuiFormAppend,
+ EuiFormPrepend,
EuiButtonEmpty,
EuiText,
useGeneratedHtmlId,
@@ -112,7 +114,7 @@ export default () => {
Label}
+ prepend={}
>
@@ -120,18 +122,16 @@ export default () => {
Read only
+
}
- append={Button}
+ append={}
>
- %
-
+ %} />
}
>
{
isLoading
clear={{ onClick: () => {} }}
prepend={
-
- Button
-
+
}
>
(
/>
px}
+ append={}
startControl={
(
/>
Add}
+ prepend={}
startControl={
(
/>
Merge}
+ prepend={}
startControl={
(
Read only}
+ prepend={}
startControl={
(
Disabled}
+ prepend={}
startControl={
(
Invalid}
+ prepend={}
startControl={
`.
```tsx interactive
import React, { useState } from 'react';
import {
EuiFlexGroup,
+ EuiFormAppend,
+ EuiFormPrepend,
EuiButtonEmpty,
EuiButtonIcon,
EuiFieldText,
@@ -22,6 +33,7 @@ import {
EuiSwitch,
EuiText,
EuiToolTip,
+ useEuiTheme,
} from '@elastic/eui';
export default () => {
@@ -29,6 +41,15 @@ export default () => {
const [isDisabled, setDisabled] = useState(false);
const [isReadOnly, setReadOnly] = useState(false);
+ const { euiTheme } = useEuiTheme();
+
+ const props = {
+ compressed: isCompressed,
+ disabled: isDisabled,
+ readOnly: isReadOnly,
+ placeholder: 'Text field'
+ }
+
return (
<>
@@ -48,150 +69,157 @@ export default () => {
onChange={(e) => setReadOnly(e.target.checked)}
/>
+
-
- Tooltip
-
- }
- compressed={isCompressed}
- disabled={isDisabled}
- readOnly={isReadOnly}
- aria-label="Use aria labels when no actual label is in use"
- />
-
-
- Popover
-
- }
- closePopover={() => {}}
- />
- }
- append={
-
- Tooltip
-
- }
- compressed={isCompressed}
- disabled={isDisabled}
- readOnly={isReadOnly}
- aria-label="Use aria labels when no actual label is in use"
- />
-
-
-
-
- }
- append={
-
- Tooltip
-
- }
- compressed={isCompressed}
- disabled={isDisabled}
- readOnly={isReadOnly}
- aria-label="Use aria labels when no actual label is in use"
- />
-
- }
- append={}
- compressed={isCompressed}
- disabled={isDisabled}
- readOnly={isReadOnly}
- aria-label="Use aria labels when no actual label is in use"
- />
-
- ,
- ,
- ]}
- append={[
- }
- closePopover={() => {}}
- />,
- ,
- ]}
- compressed={isCompressed}
- disabled={isDisabled}
- readOnly={isReadOnly}
- aria-label="Use aria labels when no actual label is in use"
- />
-
- }
- closePopover={() => {}}
- />
- }
- prepend={
-
-
-
- }
- compressed={isCompressed}
- disabled={isDisabled}
- readOnly={isReadOnly}
- aria-label="Use aria labels when no actual label is in use"
- />
-
- , 'String']}
- append={[
- 'String',
- ,
- ]}
- compressed={isCompressed}
- disabled={isDisabled}
- readOnly={isReadOnly}
- aria-label="Use aria labels when no actual label is in use"
- />
-
-
-
- ,
- ]}
- append={[
- }
- closePopover={() => {}}
- />,
- 'String',
- ]}
- compressed={isCompressed}
- disabled={isDisabled}
- readOnly={isReadOnly}
- aria-label="Use aria labels when no actual label is in use"
- />
+
+
+ }
+ autoFocus
+ />
+
+ }
+ append={
+ {}}
+ />
+ }
+ />
+
+
+ }
+ append={
+ {}}
+ />
+ }
+ />
+
+
+ 1
+
+ }
+ append={
+ {}}
+ >
+ 1
+
+ }
+ />
+
+
+
+
+ }
+ append={
+
+ {}}
+ />
+
+ }
+ />
+
+ {}}
+ />
+ }
+ closePopover={() => {}}
+ />
+ }
+ append={
+ {}}
+ />
+ }
+ closePopover={() => {}}
+ />
+ }
+ />
+
+ }
+ append={
+ {}}
+ />
+ }
+ />
+
);
};
```
+
+## Semantic label relations
+
+:::info For non-interactive `prepend` and `append` the content is rendered as `