anura-select

<anura-select adapter="some-adapter" source="123"></anura-searchbar>

A multi-select component with filtering capabilities

Attributes

adapter

required: yes, live: no, default: -

With which adapter to talk to (to load the values from)

source

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)

filter

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

• visible - the search field is visible without having to toggle it

radio

required: no, live: on-load, default: false

Whether to use radio buttons (i.e. only allow a single selection) instead of checkboxes

value

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.

type

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.

hide-title

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:

• false: "Approval: Released, Pending, New"
• true: "Released, Pending, New"

Events

change

standard change event

Fired when the user selects values in the dropdown

Parts

<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>