Module Solidtype_heroui.Search_field

HeroUI's SearchField: Kobalte's TextField.Root, with HeroUI's classes from Styles.SearchField, whose input is a search: Escape clears it, Enter submits it, and its Clear_button clears it and gives its input the focus back, as React Aria's does. Its Label, Description and Field_error are Kobalte's.

  <Search_field on_submit=(fun query -> search query)>
    <Label>"Search"</Label>
    <Search_field.Group>
      <Search_field.Search_icon />
      <Search_field.Input placeholder="Search..." />
      <Search_field.Clear_button />
    </Search_field.Group>
  </Search_field>

Kobalte's Search is a combobox; HeroUI's search field is a text field, which this is. Inside an Autocomplete.Filter it is the autocomplete's search: its text is the autocomplete's, and its input Kobalte's combo box input, whose keys move through the list and choose. A part is used inside a Search_field: elsewhere it raises Invalid_argument as it is made.

module Group : sig ... end

The icon, the input and the clear button, laid out together: a <div role="group">.

module Search_icon : sig ... end

HeroUI's magnifier, or the icon it is given.

module Input : sig ... end

The field's input, Kobalte's, of type search.

module Clear_button : sig ... end

The button that clears the field and gives its input the focus back: HeroUI's close button, named "Close" and drawing Close_button.Icon, or the children it is given, out of the tab order, as React Aria's is.

module Props : sig ... end