<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCW</div> <div>Horizon HCB</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/tool-header-search/media1_147870e778bdf581bba13a4e3806f46220c258d82.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_147870e778bdf581bba13a4e3806f46220c258d82.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_147870e778bdf581bba13a4e3806f46220c258d82.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/tool-shell/tool-header-search/media%5C_147870e778bdf581bba13a4e3806f46220c258d82.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/tool-header-search/media_147870e778bdf581bba13a4e3806f46220c258d82.png?width=750&format=png&optimize=medium</a>" width="752" height="690"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/tool-header-search/media1_112a2fa380745648c8aae4e41d5f7243912d25b4f.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_112a2fa380745648c8aae4e41d5f7243912d25b4f.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_112a2fa380745648c8aae4e41d5f7243912d25b4f.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/tool-shell/tool-header-search/media%5C_112a2fa380745648c8aae4e41d5f7243912d25b4f.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/tool-header-search/media_112a2fa380745648c8aae4e41d5f7243912d25b4f.png?width=750&format=png&optimize=medium</a>" width="752" height="690"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/tool-header-search/media1_1c32c04a062e0542792300d72022cfadac2efe765.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1c32c04a062e0542792300d72022cfadac2efe765.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1c32c04a062e0542792300d72022cfadac2efe765.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/tool-shell/tool-header-search/media%5C_1c32c04a062e0542792300d72022cfadac2efe765.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/tool-header-search/media_1c32c04a062e0542792300d72022cfadac2efe765.png?width=750&format=png&optimize=medium</a>" width="752" height="690"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/tool-header-search/media1_120f24cad971baa837f981d108d432fcba8bac12e.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_120f24cad971baa837f981d108d432fcba8bac12e.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_120f24cad971baa837f981d108d432fcba8bac12e.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/tool-shell/tool-header-search/media%5C_120f24cad971baa837f981d108d432fcba8bac12e.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/tool-header-search/media_120f24cad971baa837f981d108d432fcba8bac12e.png?width=750&format=png&optimize=medium</a>" width="752" height="690"> </picture> </div> </div></p>

<div> <div></div> <div>Element</div> <div>Desktop (Compact)</div> <div>Mobile (Cozy)</div> </div> <div> <div>A</div> <div>Field</div> <div> <p>width: 16rem;<br>padding: 0.5rem;<br>border-radius: 2rem;</p> <p>Height results in 2rem</p> </div> <div> <p>padding: 0.625rem;</p> <p>Height results in 2.5rem</p> </div> </div> <div> <div>B</div> <div>Prompt Text (Placeholder)</div> <div>font-family: --sapFontFamily;<br>font-size: --sapFontSize;<br>font-style: italic;<br>font-weight: normal;<br>line-height: 1rem;</div> </div> <div> <div>C</div> <div>Search Icon</div> <div>Non-interactive icon<br>size: 1rem;<br>margin-right: 0.375rem;</div> </div> <div> <div>D</div> <div>Аrrow</div> <div>Disabled <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%23Buttons-NestedButton">Nested Button</a> with opacity set to 1;</div> <div> <p>Disabled <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%23Buttons-NestedButton">Nested Button</a> with opacity set to 1;</p> <p>border: none;</p> </div> </div> <div> <div>position: absolute;<br>right: 0.1875rem;<br>top: 0.1875rem;<br><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Fbtp%2Fcomponents%2Ftool-shell%2Ftool-header-search%2Fstyle">sap-icon://slim-arrow-right</a></div> <div>right: 0.25rem;<br>top: 0.25rem;</div> </div> <div> <div>E</div> <div>Typed text</div> <div>font-family: --sapFontFamily;<br>font-size: --sapFontSize;</div> </div> <div> <div>F</div> <div>Actions</div> <div> <p>For the full specification of the buttons in the actions group, please refer to the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%23Buttons-NestedButton">Nested Button</a>.<br><br>The group is positioned absolutely in the middle right with an offset from the edges of the input field.<br><br><strong>Search Button</strong><br>sap-icon://slim-arrow-right</p> <p><strong>Clear Button</strong><br>sap-icon://decline</p> </div> </div> <div> <div>position: absolute;<br>right: 0.1875rem;<br>top: 0.1875rem;</div> <div>right: 0.25rem;<br>top: 0.25rem;</div> </div>

<div> <div>State</div> <div>Morning & Evening Horizon</div> <div>Horizon HC</div> </div> <div> <div><strong>Normal</strong></div> <div> <p>background: var(--sapShell_InteractiveBackground);<br>border: var(--sapContent_Transparent_Border);<br>box-shadow: var(--sapToolHeaderSearch_Shadow);<br>color: var(--sapShell_InteractiveTextColor);underline: 1px solid var(–sapField_BorderColor);</p> <p><strong>Search icon</strong><br>color: var(--sapContent_NonInteractiveIconColor);<br><br><strong>Placeholder Text</strong><br>color: var(--sapField_PlaceholderTextColor);</p> <p><strong>Typed Text</strong><br>color: var(--sapShell_TextColor);</p> <p><strong>Affordance arrow</strong><br>color: var(--sapShell_TextColor);</p> </div> </div> <div> <div><strong>Hover</strong></div> <div>background: var(--sapToolHeaderSearch_Hover_Background);<br>border: var(--sapContent_Transparent_Border);<br>box-shadow: var(--sapToolHeaderSearch_Hover_Shadow);</div> </div> <div> <div><strong>Focused</strong></div> <div>background: var(--sapToolHeaderSearch_Hover_Background);<br>border: var(--sapContent_Transparent_Border);<br>outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);</div> </div> <div> <div><strong>With typed text</strong></div> <div> <p><strong>Typed Text</strong><br>color: var(--sapShell_TextColor);</p> <p>Focus Behaviour</p> <p>The focus moves from the entire input field to the "Search" icon and a "Clear" button appears. This change is intentional to highlight the trigger.</p> </div> </div>