Search Field

Live Preview

Composition

The .dsx-searchfield wrapper joins an input and button into a single inline control. Pair the input with .dsx-input--flat-right and the button with .dsx-btn--flat-left so the shared border collapses cleanly.

Classes

Class	Purpose
`.dsx-searchfield`	Flex wrapper for the composed search control
`.dsx-input`	Base text input
`.dsx-input--sm`	Small 2rem input height
`.dsx-input--flat-right`	Removes the input’s right radius for the joined edge
`.dsx-btn`	Base button
`.dsx-btn--icon`	Square icon button for the search affordance
`.dsx-btn--sm`	Small 2rem button height
`.dsx-btn--flat-left`	Removes the button’s left radius for the joined edge

Usage

<div class="dsx-searchfield">
  <input
    type="text"
    class="dsx-input dsx-input--flat-right"
    placeholder="Search records"
  >
  <button
    type="button"
    class="dsx-btn dsx-btn--secondary dsx-btn--flat-left dsx-btn--icon"
    aria-label="Search records"
  >
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M10.5 3.5a7 7 0 1 0 4.47 12.39l4.32 4.32 1.41-1.41-4.32-4.32A7 7 0 0 0 10.5 3.5Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z"></path>
    </svg>
  </button>
</div>

Notes

Use the default control height for page-level search and .dsx-input--sm plus .dsx-btn--sm in denser toolbars.
Keep the search button as the direct second child of .dsx-searchfield so the join rules from searchfield.css apply.
If you add a clear action inside the input, place it in a positioned wrapper around the input while leaving the search button joined on the outside.