600 West

Ampselector: Sample Amp Selector 

<amp-selector id="sampleSelector" class="" on="select:AMP.setState({selectedTab: event.targetOption})">
    <button class="button  " option="1">
        Dude!
    </button>

    <button class="button  " option="2">
        Rad!
    </button>

    <button class="button  " option="3">
        Neat!
    </button>

</amp-selector>

<amp-state id="sampleSelectorState">
    <script type="application/json">
        {
            selectedTab: false
        }
    </script>
</amp-state>
 
<amp-selector
    id="{{id}}"
    class="{{modifier}}"
    {{#if role}}role="{{role}}"{{/if}}
    {{#if selectorlayout}}layout="{{selectorlayout}}"{{/if}}
    {{#if name}}name="{{name}}"{{/if}}
    {{#if on}}on="{{on}}"{{/if}}
    {{#if multiple}}multiple{{/if}}
    {{#if selected}}[selected]="{{statevalue}}"{{/if}}
>
    {{> @children}}
</amp-selector>

{{#if state}}
    <amp-state id="{{id}}State">
        <script type="application/json">
            {
                {{state}}: {{statevalue}}
            }
        </script>
    </amp-state>
{{/if}}
 
{
  "id": "sampleSelector",
  "modifier": null,
  "style": null,
  "role": null,
  "selectorlayout": null,
  "on": "select:AMP.setState({selectedTab: event.targetOption})",
  "state": "selectedTab",
  "statevalue": "false",
  "multiple": null,
  "selected": null,
  "children": [
    {
      "component": "button",
      "context": {
        "text": "Dude!",
        "option": 1
      }
    },
    {
      "component": "button",
      "context": {
        "text": "Rad!",
        "option": 2
      }
    },
    {
      "component": "button",
      "context": {
        "text": "Neat!",
        "option": 3
      }
    }
  ]
}
  • Content: 
    amp-selector {
    [role="tabpanel"] {
        display: none;
    }
    [selected] + [role="tabpanel"] {
        display: block;
    }
}
  • URL: /components/raw/ampselector/AMPSelector.scss
  • Filesystem Path: components/molecules/AMPSelector/AMPSelector.scss
  • Size: 137 Bytes

AMPSelector

Represents a control that presents a menu of options and lets the user choose from it.

More information can be found in the AMP documentation.

Required Script

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

Best Practices

The AMP selector is a control that presents a list of options and lets the user choose one or many options; the contents of the options aren’t just limited to text.

  • An amp-selector can contain any arbitrary HTML elements or AMP components (e.g., amp-carousel, amp-img, etc.).
  • An amp-selector cannot contain any nested amp-selector controls.
  • Selectable options can be set by adding the option attribute to the element and assigning a value to the attribute (e.g., <li option='value'></li>).
  • Disabled options can be set by adding the disabled attribute to the element (e.g., <li option='d' disabled></li>).
  • Preselected options can be set by adding the selected attribute to the element (e.g., <li option='b' selected></li>).
  • To allow for multiple selections, add the multiple attribute to the amp-selector element. By default, the amp-selector allows for one selection at a time.
  • To disable the entire amp-selector, add the disabled attribute to the amp-selector element.
  • When an amp-selector contains a name attribute and the amp-selector is inside a form tag, if a submit event occurs on the form, the amp-selectorbehaves like a radio-button/checkbox group and submits the selected values (the ones assigned to the option) against the name of the amp-selector.

Accessibility

AMPSelector is accessible by keyboard and screenreader users according to WCAG 2.0 guidelines.