<anura-select adapter="some-adapter" source="123"></anura-searchbar>
A multi-select component with filtering capabilities
required: yes, live: no, default: -
With which adapter to talk to (to load the values from)
required: yes, live: on-load, default: -
What metadata field to query in order to get the possible values from. The value type will depend on the adapter that you're using (usually an ID or a UUID)
required: no, live: yes, default: true
How to handle the search field, possible values:
true - search field is available, but must be toggled through the search-icon
false - the search field is not available
required: no, live: on-load, default: false
Whether to use radio buttons (i.e. only allow a single selection) instead of checkboxes
required: no, live: set by component, default: -
The value deriving from the inputs (comma-separated). Can be used to set an initial value, but will only be written to by the component afterwards.
required: no, live: set by component, default: -
The type of field that should be affected. This will be set by your adapter and is specific to the implementation. Don't touch this.
required: no, live: on-change, default: false
Whether the title that is displayed inside the select box should still be visible when values are selected. Given the screenshot above:
standard change event
Fired when the user selects values in the dropdown
<header part="header">
<span part="header-title"></span>
<span part="header-value"></span>
<button part="select-button header-clear">
<anura-icon part="header-icon header-icon-clear"></anura-icon>
</button>
<button part="select-button header-toggle">
<anura-icon part="header-icon header-icon-toggle"></anura-icon>
</button>
</header>
<fieldset part="fieldset">
<div part="fieldset-title">
<label part="fieldset-label"></label>
<span part="fieldset-counter"></span>
<button part="fieldset-reset"></button>
<button part="select-button fieldset-filter">
<anura-icon part="select-icon select-icon-search"></anura-icon>
</button>
<button part="select-button fieldset-close" id="fieldset-close" tabindex="1">
<anura-icon part="select-icon select-icon-close" icon="x"></anura-icon>
</button>
</div>
<input part="fieldset-search">
<div part="fieldset-body">
<label part="select-label">
<input part="select-input">
<span part="select-name"></span>
<span part="select-count"></span>
</label>
<!-- labels repeat here -->
</div>
</fieldset>