600 West

Ampselector: Default 

<amp-selector id="" class="">
    <button class="button  ">
        click me!
    </button>

    <button class="button  ">
        no click me!
    </button>

</amp-selector>
 
<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": null,
  "modifier": null,
  "style": null,
  "role": null,
  "selectorlayout": null,
  "on": null,
  "state": null,
  "statevalue": null,
  "multiple": null,
  "selected": null,
  "children": [
    {
      "component": "button",
      "context": {
        "text": "click me!"
      }
    },
    {
      "component": "button",
      "context": {
        "text": "no click me!"
      }
    }
  ]
}
  • 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.