amp-selector

Edit on Github
Open in Playground

Introduction

amp-selector lets the user choose from a list of options. The contents of the options isn't limited to just text.

Setup

Import the amp-selector component.

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

Single Select

amp-selector defaults to single selection. The option is required for all selectable elements, for example, the divider in the following sample cannot be selected.

Example

<amp-selector layout="container">
  <amp-img src="/img/landscape_sea_300x199.jpg"
    width="60"
    height="40"
    option="1"></amp-img>
  <amp-img src="/img/landscape_desert_300x200.jpg"
    width="60"
    height="40"
    option="2"></amp-img>
  <div class="divider inline-block mx1"></div>
  <amp-img src="/img/landscape_ship_300x200.jpg"
    width="60"
    height="40"
    option="3"></amp-img>
  <amp-img src="/img/landscape_village_300x200.jpg"
    width="60"
    height="40"
    option="4"></amp-img>
</amp-selector>

Multi Select

Add the attribute multiple to enable multi selection.

Example

<amp-selector layout="container"
  multiple>
  <amp-img src="/img/landscape_sea_300x199.jpg"
    width="60"
    height="40"
    option="1"></amp-img>
  <amp-img src="/img/landscape_desert_300x200.jpg"
    width="60"
    height="40"
    option="2"></amp-img>
  <amp-img src="/img/landscape_ship_300x200.jpg"
    width="60"
    height="40"
    option="3"></amp-img>
  <amp-img src="/img/landscape_village_300x200.jpg"
    width="60"
    height="40"
    option="4"></amp-img>
</amp-selector>

Attributes

The following attributes are supported for select elements:

  • disabled: disable an element.
  • selected: pre-select an element.

Example

<amp-selector layout="container"
  multiple>
  <amp-img src="/img/landscape_sea_300x199.jpg"
    width="60"
    height="40"
    option="1"></amp-img>
  <amp-img src="/img/landscape_desert_300x200.jpg"
    width="60"
    height="40"
    option="2"
    selected></amp-img>
  <amp-img src="/img/landscape_ship_300x200.jpg"
    width="60"
    height="40"
    option="3"></amp-img>
  <amp-img src="/img/landscape_village_300x200.jpg"
    width="60"
    height="40"
    option="4"
    disabled></amp-img>
</amp-selector>

Disabled

Add the attribute disabled to disable the whole selector.

Example

<amp-selector layout="container"
  disabled>
  <amp-img src="/img/landscape_sea_300x199.jpg"
    width="60"
    height="40"></amp-img>
  <amp-img src="/img/landscape_desert_300x200.jpg"
    width="60"
    height="40"></amp-img>
  <amp-img src="/img/landscape_ship_300x200.jpg"
    width="60"
    height="40"></amp-img>
  <amp-img src="/img/landscape_village_300x200.jpg"
    width="60"
    height="40"></amp-img>
</amp-selector>

Actions

The clear action may be used to clear all selections of an amp-selector.

Example

  <button on="tap:clearActionDemoSelector.clear"
    class="ampstart-btn ampstart-btn-secondary caps m1">
    Clear Selection</button>
  <amp-selector id="clearActionDemoSelector"
    layout="container"
    class="m1"
    multiple>
    <amp-img src="/img/landscape_sea_300x199.jpg"
      width="60"
      height="40"
      option="1"></amp-img>
    <amp-img src="/img/landscape_desert_300x200.jpg"
      width="60"
      height="40"
      option="2"></amp-img>
    <amp-img src="/img/landscape_ship_300x200.jpg"
      width="60"
      height="40"
      option="3"
      selected></amp-img>
    <amp-img src="/img/landscape_village_300x200.jpg"
      width="60"
      height="40"
      option="4"></amp-img>
  </amp-selector>

Forms

Inside a form, amp-selector behaves like a radio-button/checkbox group and submits the selected value(s) against the name of the amp-selector. Here we've styled an amp-selector to function like a radio list. Using amp-selector for this has the advantage that bindings using amp-bind are easier to implement.

Example

Option A
Option B
Option C
<form action="#"
  method="get"
  target="_top">
  <amp-selector class="radio-selector"
    layout="container"
    name="my-selector">
    <div option="a">Option A</div>
    <div option="b">Option B</div>
    <div option="c">Option C</div>
  </amp-selector>
  <input type="submit"
    value="Select"
    class="ampstart-btn ampstart-btn-secondary caps m1">
</form>