Search
In progress
RTL
Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation.
Default
Custom
Search props
Textinput with search options. Renders as a Moon.Design.Dropdown. Is designed for usage outside of the forms
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | Yes | - | Id of the component |
| options | list | Yes | - | ... format: [%{key: shown_label, value: option_value, disabled: boolean}], disabled is optional |
| disabled | boolean | No | - | Set disabled/non-disabled |
| prompt | string | No | - | Some prompt to be shown on empty value |
| size | sm | md | lg | No | "md" | Common moon size property |
| class | css_class | No | - | Additional classes for the <select> tag |
| testid | string | No | - | Data-testid attribute value |
| error | boolean | No | - | Some additional styling will be set to indicate field is invalid |
| is_open | boolean | No | - | Should dropdown be open |
| filter | string | No | - | Filtering value for the options, appears in input |
| on_keyup | event | No | - | On key up event for the input - use it for filter options |
| on_change | event | No | - | Event that fires when smth is chosen from the dropdown menu |
| default | slot | No | - | Option for custom stylings - use it to show icons or anything else |
| trigger | slot | No | - | Trigger element for the dropdown, default is Dropdown.Select |
| option | slot | No | - | Slot used for rendering single option. option[:key] will be used if not given |
Search.Icon props
Icon for the search
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id HTML attribute |
| testid | string | No | - | Data-testid attribute value |
| class | css_class | No | - | Additional classes for the <select> tag |
| name | string | No | "generic_search" | Icon name to be shown |
Search.Button props
Icon for the search
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id of the component |
| testid | string | No | - | Data-testid attribute value |
| class | css_class | No | - | Additional classes for the <select> tag |
| title | string | No | "Clear" | Text in the button |
| value | string | No | "" | Value to be set to input when button is clicked |
| on_click | event | No | - | Button's on_click event |