diff --git a/src/SearchBar/SearchBar.style.ts b/src/SearchBar/SearchBar.style.ts
index 6e9711f9b..9ee5e1f0b 100644
--- a/src/SearchBar/SearchBar.style.ts
+++ b/src/SearchBar/SearchBar.style.ts
@@ -13,6 +13,7 @@ export const SearchPanelInputContainer = styled.div`
   align-items: center;
   padding: 0 12px;
   color: ${theme.textColor()};
+  border-bottom: 1px solid ${theme.neutralColor(300)};
 `
 
 export const SearchPanelInputElementLeft = styled.div`
@@ -52,3 +53,8 @@ export const SearchPanelInput = styled.input.attrs(() => ({
 export const SearchPanelContent = styled.div`
   padding: 24px;
 `
+
+export const TriggerElementContainer = styled.div`
+  box-shadow: 0 0 0 4px ${theme.color('primary', { opacity: 0.3 })};
+  border-radius: 4px;
+`
diff --git a/src/SearchBar/SearchPanel.tsx b/src/SearchBar/SearchPanel.tsx
index f6f2c6c9e..168d98dd1 100644
--- a/src/SearchBar/SearchPanel.tsx
+++ b/src/SearchBar/SearchPanel.tsx
@@ -4,6 +4,7 @@ import * as React from 'react'
 import { Icon } from '../Icon'
 import { TextInputProps } from '../TextInput'
 import { TogglePanelProps, TogglePanelStyleSetter } from '../TogglePanel'
+import { TriggerElement } from '../withTriggerElement'
 
 import {
   SearchPanelContainer,
@@ -11,6 +12,7 @@ import {
   SearchPanelInput,
   SearchPanelInputElementLeft,
   SearchPanelContent,
+  TriggerElementContainer,
 } from './SearchBar.style'
 
 const setPanelStyle: TogglePanelStyleSetter = (
@@ -29,6 +31,7 @@ const InnerSearchPanel: React.VoidFunctionComponent<InnerSearchPanelProps> = ({
   onChange,
   placeholder,
   renderPanel,
+  triggerElement,
 }) => {
   const inputRef = React.useRef<HTMLInputElement>(null)
 
@@ -58,6 +61,9 @@ const InnerSearchPanel: React.VoidFunctionComponent<InnerSearchPanelProps> = ({
           onChange={onChange}
           placeholder={placeholder}
         />
+        {!!triggerElement && (
+          <TriggerElementContainer>{triggerElement}</TriggerElementContainer>
+        )}
       </SearchPanelInputContainer>
       <SearchPanelContent onClick={handleStopPropagation}>
         {renderPanel()}
@@ -77,7 +83,9 @@ export const SearchPanel: React.VoidFunctionComponent<SearchPanelProps> = ({
     setStyle={setPanelStyle}
   >
     {(modal) =>
-      modal.state !== ModalState.closed && <InnerSearchPanel {...rest} />
+      modal.state !== ModalState.closed && (
+        <InnerSearchPanel triggerElement={triggerElement} {...rest} />
+      )
     }
   </SearchPanelContainer>
 )
@@ -85,6 +93,7 @@ export const SearchPanel: React.VoidFunctionComponent<SearchPanelProps> = ({
 interface InnerSearchPanelProps
   extends Pick<TextInputProps, 'value' | 'onChange' | 'placeholder'> {
   renderPanel: () => React.ReactNode
+  triggerElement?: TriggerElement
 }
 
 interface SearchPanelProps
diff --git a/src/TextInput/TextInput.style.ts b/src/TextInput/TextInput.style.ts
index 7f077d316..d9345c3b5 100644
--- a/src/TextInput/TextInput.style.ts
+++ b/src/TextInput/TextInput.style.ts
@@ -69,4 +69,12 @@ export const IconButton = styled(Icon)`
   &:hover {
     cursor: pointer;
   }
+  font-size: 24px;
+  color: ${theme.textColor()};
+`
+
+export const Line = styled.div`
+  border-left: 1px solid ${theme.neutralColor(300)};
+  margin: 0 8px;
+  height: 24px;
 `
diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx
index bf7a4b080..91f57a040 100644
--- a/src/TextInput/TextInput.tsx
+++ b/src/TextInput/TextInput.tsx
@@ -9,6 +9,7 @@ import {
   IconButton,
   Input,
   InputContainer,
+  Line,
   SideElementContainer,
 } from './TextInput.style'
 
@@ -63,18 +64,20 @@ const InnerTextInput = React.forwardRef<HTMLInputElement, TextInputInnerProps>(
 
         {(elementRight || canReset) && (
           <SideElementContainer data-position="right">
-            {elementRight}
-
             {canReset && value && `${value}`.length > 0 && (
-              <IconButton
-                icon="close"
-                onClick={(e) =>
-                  props.onChange?.({
-                    target: { ...e.target, value: '' },
-                  } as React.ChangeEvent<HTMLInputElement>)
-                }
-              />
+              <>
+                <IconButton
+                  icon="close"
+                  onClick={(e) =>
+                    props.onChange?.({
+                      target: { ...e.target, value: '' },
+                    } as React.ChangeEvent<HTMLInputElement>)
+                  }
+                />
+                {elementRight && <Line />}
+              </>
             )}
+            {elementRight}
           </SideElementContainer>
         )}
       </InputContainer>