SearchField

A search input with a button that clears it.

Search the parts

Press Enter to search, Escape to clear.

<script>
  import { $bind, $signal } from 'brumate/signals';
  import Button from '@brumate/ui/Button.brm';
  import Input from '@brumate/ui/Input.brm';
  import Label from '@brumate/ui/Label.brm';
  import SearchField from '@brumate/ui/SearchField.brm';

  let query = $signal('');
  let searched = $signal('');
  import Icon from '../../src/components/Icon.brm';
</script>

<SearchField class="ui-field" value=$bind(query) onSubmit=((value) => (searched = value))>
  <Label>Search the parts</Label>
  <span class="ui-group">
    <span class="ui-input-icon"><Icon name="search" /><Input class="ui-input" /></span>
    <Button class="ui-button ui-icon-button"><Icon name="close" /></Button>
  </span>
</SearchField>
<p>{searched ? `Searched for ${searched}.` : 'Press Enter to search, Escape to clear.'}</p>

Enter calls onSubmit with the value. Escape and the button clear it, and call onClear.
The button is out of the order of Tab, since Escape clears the field too.
value is the text. See State.
It holds a Label, an Input, a Text with slot="description" and a Button, and names them for each other, as a TextField does.
The element shows data-empty while the field is empty, and data-disabled.