Select

<section>
  <ef-select placeholder="Pick item..." opened>
    <ef-item type="header">Drinks</ef-item>
    <ef-item value="1">Cola</ef-item>
    <ef-item value="2" disabled>Apple Juice</ef-item>
    <ef-item value="3">Iced Tea</ef-item>
    <ef-item type="header">Ice Cream</ef-item>
    <ef-item value="4">Vanilla</ef-item>
    <ef-item value="5">Chocolate</ef-item>
    <ef-item value="6">Honey &amp; Walnut</ef-item>
    <ef-item value="7">Raspberry</ef-item>
  </ef-select>
  <ef-select placeholder="Disabled..." disabled></ef-select>
  <ef-select placeholder="Default selected...">
    <ef-item type="header">Drinks</ef-item>
    <ef-item value="1">Cola</ef-item>
    <ef-item value="2" disabled>Apple Juice</ef-item>
    <ef-item selected value="3">Iced Tea</ef-item>
    <ef-item type="header">Ice Cream</ef-item>
    <ef-item value="4">Vanilla</ef-item>
    <ef-item value="5">Chocolate</ef-item>
    <ef-item value="6">Honey &amp; Walnut</ef-item>
    <ef-item value="7">Raspberry</ef-item>
  </ef-select>
  <ef-select disabled>
    <ef-item selected>Lemonade</ef-item>
  </ef-select>
</section>

section {
  height: 250px;
  padding: 0 3px;
}

ef-select {
  margin-right: 5px;
}

Basic Usage

ef-select expands upon the native select element, providing a fully themeable dropdown element.

Choices can be defined using ef-item.

<ef-select>
  <ef-item value="1">Cola</ef-item>
  <ef-item value="2">Lemonade</ef-item>
  <ef-item value="3">Orange Juice</ef-item>
  <ef-item value="4" disabled>Apple Juice</ef-item>
  <ef-item value="5">Iced Tea</ef-item>
</ef-select>

<section>
  <ef-select>
    <ef-item value="1">Cola</ef-item>
    <ef-item value="2">Lemonade</ef-item>
    <ef-item value="3">Orange Juice</ef-item>
    <ef-item value="4" disabled>Apple Juice</ef-item>
    <ef-item value="5">Iced Tea</ef-item>
  </ef-select>
</section>

section {
  height: 155px;
  padding: 0 3px;
}

Data property interface

The data property of the ef-select use the SelectData interface for its data items which is described below.

Name	Type	Description
label	string	Item's label
value	string	Value of an item
selected	boolean	Selection state of the item
type	string	Type of item. Value can be `text`, `header`, `divider`
subLabel	string	The text beneath the label
readonly	boolean	Sets the item to be readonly
disabled	boolean	Sets the item to be disabled

Categorize into groups

Groups are also defined using ef-item. The only difference is that we add a type="header" attribute onto the element.

<ef-select>
  <ef-item type="header">Drinks</ef-item>
  <ef-item value="1">Cola</ef-item>
  <ef-item value="2">Lemonade</ef-item>
  <ef-item value="3">Water</ef-item>
  <ef-item type="header">Ice Cream</ef-item>
  <ef-item value="4">Vanilla</ef-item>
  <ef-item value="5">Chocolate</ef-item>
  <ef-item value="6">Strawberry</ef-item>
  <ef-item value="7">Raspberry</ef-item>
</ef-select>

<section>
  <ef-select>
    <ef-item type="header">Drinks</ef-item>
    <ef-item value="1">Cola</ef-item>
    <ef-item value="2">Lemonade</ef-item>
    <ef-item value="3">Water</ef-item>
    <ef-item type="header">Ice Cream</ef-item>
    <ef-item value="4">Vanilla</ef-item>
    <ef-item value="5">Chocolate</ef-item>
    <ef-item value="6">Strawberry</ef-item>
    <ef-item value="7">Raspberry</ef-item>
  </ef-select>
</section>

section {
  height: 250px;
  padding: 0 3px;
}

Adding a placeholder

Once you have your choices and groups defined, you can then add placeholder text to help users understand what the list contains and what their choice is for.

<ef-select placeholder="Choose your refreshment...">
  ...

<section>
  <ef-select placeholder="Choose your refreshment...">
    <ef-item value="1">Cola</ef-item>
    <ef-item value="2">Lemonade</ef-item>
    <ef-item value="3">Orange Juice</ef-item>
    <ef-item value="4">Apple Juice</ef-item>
    <ef-item value="5">Iced Tea</ef-item>
  </ef-select>
</section>

section {
  height: 155px;
  padding: 0 3px;
}

Selecting a default option

You may wish to set an initial selected value. This can be achieved by adding a selected attribute to the option you would like to have selected by default.

Only one option can be selected at a time.

...
  <ef-item selected>Water</ef-item>
...

<section>
  <ef-select placeholder="Choose your refreshment...">
    <ef-item type="header">Drinks</ef-item>
    <ef-item value="1">Cola</ef-item>
    <ef-item value="2">Lemonade</ef-item>
    <ef-item value="6" selected>Water</ef-item>
    <ef-item type="header">Ice Cream</ef-item>
    <ef-item value="7">Vanilla</ef-item>
    <ef-item value="14">Strawberry</ef-item>
    <ef-item value="15">Raspberry</ef-item>
  </ef-select>
</section>

section {
  height: 225px;
  padding: 0 3px;
}

Disabling an option

Options can be disabled by adding a disabled attribute to the options you wish to disable.

...
  <ef-item disabled>Iced Tea</ef-item>
  <ef-item disabled>Water</ef-item>
...

<section>
  <ef-select placeholder="Choose your refreshment...">
    <ef-item type="header">Drinks</ef-item>
    <ef-item value="4" disabled>Apple Juice</ef-item>
    <ef-item value="5" disabled>Iced Tea</ef-item>
    <ef-item value="6" disabled>Water</ef-item>
    <ef-item type="header">Ice Cream</ef-item>
    <ef-item value="7">Vanilla</ef-item>
    <ef-item value="8">Chocolate</ef-item>
  </ef-select>
</section>

section {
  height: 200px;
  padding: 0 3px;
}

Configuring options using data object

Depending on your usage, you may wish to configure ef-select using its data object.

Here is a simple configuration object:

[
  {
    label: 'Drinks',
    type: 'header'
  },
  {
    label: 'Tea',
    value: 'tea'
  },
  {
    label: 'Beer',
    value: 'beer',
    selected: true
  },
  {
    label: 'Ice Cream',
    type: 'header'
  },
  {
    label: 'Vanilla',
    value: 'vanilla',
    disabled: true
  },
  {
    label: 'Strawberry',
    value: 'Strawberry'
  }
]

You can set this configuration object onto the data property of ef-select.

var el = document.querySelector('ef-select');
el.data = myConfigurationObject;

<section>
  <ef-select></ef-select>
</section>

var el = document.querySelector('ef-select');
el.data = [{
    label: 'Drinks',
    type: 'header'
  },
  {
    label: 'Tea',
    value: 'tea'
  },
  {
    label: 'Beer',
    value: 'beer',
    selected: true
  },
  {
    label: 'Ice Cream',
    type: 'header'
  },
  {
    label: 'Vanilla',
    value: 'vanilla',
    disabled: true
  },
  {
    label: 'Strawberry',
    value: 'Strawberry'
  }
];

section {
  height: 180px;
  padding: 0 3px;
}

Restricting list height

The max-height of the list can be restricted using the --list-max-height property.

ef-select {
  --list-max-height: 100px;
}

<section>
  <ef-select placeholder="Choose your refreshment...">
    <ef-item type="header">Drinks</ef-item>
    <ef-item value="4" disabled>Apple Juice</ef-item>
    <ef-item value="5" disabled>Iced Tea</ef-item>
    <ef-item value="6" disabled>Water</ef-item>
    <ef-item type="header">Ice Cream</ef-item>
    <ef-item value="7">Vanilla</ef-item>
    <ef-item value="8">Chocolate</ef-item>
  </ef-select>
</section>

section {
  height: 130px;
  padding: 0 3px;
}

ef-select {
  --list-max-height: 100px;
}

CSS Variables

Name	Description
--list-max-height	Maximum height of the drop-down list
--list-max-width	Maximum width of the drop-down list

API Reference

Attributes

string

placeholder

Placeholder to display when no value is set

boolean

opened

Toggles the opened state of the list

boolean

error

Set state to error

boolean

warning

Set state to warning

boolean

disabled

Set disabled state

Properties

string

label

Current text content of the selected value

string

placeholder

Placeholder to display when no value is set

boolean

opened

Toggles the opened state of the list

false

boolean

error

Set state to error

false

boolean

warning

Set state to warning

false

SelectData | null

data

Construct the menu from data object. Cannot be used with slotted content

string

value

Value of the element

boolean

disabled

Set disabled state

false

Events

value-changed

Fired when the value property changes.

opened-changed

Fired when the opened property changes.

Element Framework

Select

Basic Usage

Data property interface

Categorize into groups

Adding a placeholder

Selecting a default option

Disabling an option

Configuring options using data object

Restricting list height

CSS Variables

API Reference

Attributes

Properties

Events