diff --git a/src/components/textField/ClearButton.tsx b/src/components/textField/ClearButton.tsx
index 09e4d29360..f082573eb3 100644
--- a/src/components/textField/ClearButton.tsx
+++ b/src/components/textField/ClearButton.tsx
@@ -17,7 +17,7 @@ const TIMING_CONFIG = {
easing: Easing.bezier(0.33, 1, 0.68, 1)
};
-const ClearButton = ({testID, onClear, onChangeText, clearButtonStyle}: ClearButtonProps) => {
+const ClearButton = ({testID, onClear, onChangeText, clearButtonStyle, ClearButtonContentComponent}: ClearButtonProps ) => {
const {hasValue} = useContext(FieldContext);
const animatedValue = useSharedValue(hasValue ? VISIBLE_POSITION : NON_VISIBLE_POSITION);
const animatedOpacity = useSharedValue(hasValue ? 1 : 0);
@@ -49,6 +49,13 @@ const ClearButton = ({testID, onClear, onChangeText, clearButtonStyle}: ClearBut
return (
+ {ClearButtonContentComponent?
+ :
+ />}
);
};
diff --git a/src/components/textField/index.tsx b/src/components/textField/index.tsx
index 1e61189909..8dc902300a 100644
--- a/src/components/textField/index.tsx
+++ b/src/components/textField/index.tsx
@@ -76,6 +76,7 @@ const TextField = (props: InternalTextFieldProps) => {
topTrailingAccessory,
bottomAccessory,
showClearButton,
+ ClearButtonContentComponent,
onClear,
// Validation
enableErrors, // TODO: rename to enableValidation
@@ -210,11 +211,13 @@ const TextField = (props: InternalTextFieldProps) => {
)}
{showClearButton && (
+
)}
{trailingAccessory}
diff --git a/src/components/textField/types.ts b/src/components/textField/types.ts
index 1f98fe7874..16b3a27fe0 100644
--- a/src/components/textField/types.ts
+++ b/src/components/textField/types.ts
@@ -78,6 +78,8 @@ export interface ClearButtonProps extends Pick;
+ /** Pass to render a custom clear button */
+ ClearButtonContentComponent?: React.ComponentType;
}
export interface LabelProps extends MandatoryIndication, Pick {
@@ -226,6 +228,11 @@ export type TextFieldProps = MarginModifiers &
* Should show a clear button when there is a value
*/
showClearButton?: boolean;
+
+ /**
+ * Pass to render a custom clear button
+ */
+ ClearButtonContentComponent?: ReactElement;
/**
* Text to display under the input
*/