Search field with optional icons and buttons that respond to the input state.
- Custom icons and buttons for states "focus", "focus and dirty", "dirty" and "none"
- Custom Textfield display
- Full width display
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| buttons | optional | Object | Object with icons for each state: none, focus, focus_dirty and dirty. Each state ("none", "focus", "focus_dirty" and "dirty") can have buttons before and after the search field. Pass hyperscript or a component (or Array) to each. |
|
| fullWidth | optional | Boolean | false | A fullwidth search box is visually extended to the sides (with a height of 56px); inset search box has side (page) padding and is less tall (48px) |
| textfield | required | Options object for Text Field | Options for the TextField, for instance to specify the label |
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| after | optional | String, hyperscript or component | Extra content after main content; note that this content is placed right of preceding elements with a higher stacking depth | |
| before | optional | String, hyperscript or component | Extra content before main content; note that this content is placed left of subsequent elements with a lower stacking depth | |
| className | optional | String | Extra CSS class appended to pe-search |
|
| element | optional | String | "div" | HTML element tag for the checkbox container |
| id | optional | String | HTML element id for the search field | |
| style | optional | Object | For setting simple style attributes | |
| tone | optional | String: "dark" or "light" | Renders the component light on dark (sets class pe-dark-tone); use "light" to locally inverse (sets class pe-light-tone) |
Search is composed from:
Search usually contains:
- History pane
- Search results pane