Input Search
A search input with an optional clear button. The clear button appears automatically when the field has a value and disappears once cleared.
Default
Search input — clear button appears when the field has a value.
<diwa-input-search label="Search" placeholder="Search components…"></diwa-input-search>With value (clear button visible)
The × clear button appears automatically when value is non-empty.
<diwa-input-search label="Search" value="button" show-clear-button></diwa-input-search>Without clear button
Set showClearButton={false} to suppress the clear button entirely.
<diwa-input-search label="Search" placeholder="Search…"></diwa-input-search>Compact + hidden label
Ideal for embedded toolbar search — label hidden visually but still accessible via aria-label.
<diwa-input-search label="Search" placeholder="Search…" hide-label compact></diwa-input-search>Slots
Use start to embed a search icon inside the input border, and label-after to place contextual icons or links after the label.
<diwa-input-search label="Search" placeholder="Search…">
<diwa-icon slot="start" name="search" size="16"></diwa-icon>
<diwa-icon slot="label-after" name="info" size="16"></diwa-icon>
</diwa-input-search>