diff --git a/src/components/collection/Selector/List/Header/Name.tsx b/src/components/collection/Selector/List/Header/Name.tsx
index 8041e579f..35f66bb3c 100644
--- a/src/components/collection/Selector/List/Header/Name.tsx
+++ b/src/components/collection/Selector/List/Header/Name.tsx
@@ -1,4 +1,5 @@
import { TextField } from '@mui/material';
+import ClearInput from 'components/shared/Input/Clear';
import { useIntl } from 'react-intl';
interface Props {
@@ -30,6 +31,14 @@ function CollectionSelectorHeaderName({
size="small"
variant="outlined"
value={inputValue}
+ InputProps={{
+ endAdornment: (
+
+ ),
+ }}
onChange={(event) => {
onChange(event.target.value);
}}
diff --git a/src/components/shared/Input/Clear.tsx b/src/components/shared/Input/Clear.tsx
new file mode 100644
index 000000000..4c59cb48e
--- /dev/null
+++ b/src/components/shared/Input/Clear.tsx
@@ -0,0 +1,39 @@
+import { Close } from '@mui/icons-material';
+import { IconButton, InputAdornment } from '@mui/material';
+import { useIntl } from 'react-intl';
+
+interface Props {
+ onClear: (emptyValue: string) => void;
+ show?: boolean;
+}
+
+function ClearInput({ onClear, show }: Props) {
+ const intl = useIntl();
+
+ return (
+
+ onClear('')}
+ size="large"
+ >
+
+
+
+ );
+}
+
+export default ClearInput;
diff --git a/src/lang/en-US.ts b/src/lang/en-US.ts
index a139ef363..b175d4889 100644
--- a/src/lang/en-US.ts
+++ b/src/lang/en-US.ts
@@ -1300,6 +1300,10 @@ const Notifications: ResolvedIntlConfig['messages'] = {
'notifications.paymentMethods.missing.trialPast.instructions': `Please {cta} to continue using Estuary Flow.`,
};
+const JsonForms: ResolvedIntlConfig['messages'] = {
+ 'jsonForms.clearInput': `Clear input field`,
+};
+
const enUSMessages: ResolvedIntlConfig['messages'] = {
...CommonMessages,
...CTAs,
@@ -1361,6 +1365,7 @@ const enUSMessages: ResolvedIntlConfig['messages'] = {
...NotBeforeNotAfter,
...Notifications,
...Fetchers,
+ ...JsonForms,
};
export default enUSMessages;