Ready-made interactivity with AMP components

This guide outlines interactive possibilities available in the AMP component library. The library provides ready-made elements that meet common and uncommon user interface needs. You are able to customize these components, and how they interact with users, to meet specific needs. Read-on to learn how to harness this to decrease initial build costs without losing adaptability.

Ready-made interactive components

Many of the available components fulfill a single purpose of interactivity. Most can standalone, but a core principle of AMP is composability. Composability allows you to combine different AMP components together to implement a customized interaction. Most allow templating with amp-mustache.

AMP offers the following ready-made interactive components:

• amp-accordion: a stacked list of headers that collapse or expand content sections with user interaction.
• amp-app-banner: A wrapper and minimal UI for a cross-platform, fixed-position banner showing a call-to-action to install an app.
• amp-autocomplete: suggests completed results corresponding to the user input as they type.
• amp-base-carousel: displays multiple similar pieces of content along a horizontal axis or vertical axis.
• amp-carousel: displays multiple pieces of content along a horizontal axis that users can tap through.
• amp-consent: a UI control that collects and stores a user’s consent. Can block other AMP components based on user consent.
• amp-date-picker: a widget to select dates.
• amp-form: creates forms, but with AMP powers.
• amp-lightbox-gallery: displays images in a lightbox gallery.
• amp-image-lightbox: Provides a lightbox effect for a specified image.
• amp-image-slider: A slider to compare two images.
• amp-inline-gallery: displays multiple images along a horizontal axis that users can tap through.
• amp-inputmask: provides input masking capabilities to inputs in AMP forms.
• amp-lightbox: displays elements in a full-viewport “lightbox” modal.
• amp-mega-menu: Displays top-level navigational content inside expandable containers.
• amp-nested-menu: Displays a drilldown menu with arbitrary levels of nested submenus.
• amp-recaptcha-input: appends a reCAPTCHA v3 token to AMP form submissions.
• amp-sidebar: a way to display meta content intended for temporary access such as navigation, links, buttons, menus.
• amp-truncate-text: Truncates text with an ellipsis, optionally showing an overflow element.
• amp-user-notification: Displays a dismissable notification to the user.
• amp-video: Replaces the HTML5 video tag.
• amp-video-docking: unctionality for videos that minimize ("dock") to a corner or a custom position on scroll.

Implementation patterns

Using an AMP component may be as easy copy and pasting the sample code! If not, you are able to specify functionality. Each component’s reference documentation outlines behavior and styling customization.

If you are unable to find a ready-made solution, think about how you could achieve the desired behavior by combining existing components. Combine multiple components or other HTML elements to create new ones! The AMP team is constantly surprised with the creative solutions developers have composed, some are featured in our examples (and if you create something cool we encourage you to contribute it!). It’s impossible to document all the ways to combine AMP components, but this section outlines some best practices.

Customize behavior with attributes

By using common AMP attributes and element-specific attributes you can customize and combine components to fit your needs. Read the reference documentation to learn its specific attributes.

Small behavior change

Some attributes will change a small behavior. In the example below, the amp-accordion includes the animate attribute. This attribute adds a slight "roll down" animation to the expansion and collapse of each section when the user interacts with it.

<amp-accordion animate>
 <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <amp-img
      src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"
      alt="Photo of a squirrel"
    ></amp-img>
  </section>
</amp-accordion>

Combination and composition

Combine AMP components with other AMP components or HTML elements to improve or build more complex interactivity and user experiences. For example, combine amp-form and amp-date-picker to create a booking flow.

<form method="post" action-xhr="/documentation/examples/api/submit-form-xhr" target="_top">
  <amp-date-picker id="form-picker" type="single" mode="static" layout="fixed-height" height="360" format="YYYY-MM-DD">
  </amp-date-picker>
  <input type="submit">
  <div submit-success>
    Thanks!
  </div>
</form>

There are no limits on the number of components you may combine. The example below builds on the previous one. We’ve added amp-inputmask to communicate the type of input accepted from a user and amp-mustache to relay a success message.

<form class="sample-form" method="post" action-xhr="/documentation/examples/api/postal" target="_top">
  <amp-date-picker id="form-picker" type="single" mode="static" layout="fixed-height" height="360" format="YYYY-MM-DD">
  </amp-date-picker>
  <label>Phone: <input name="code" type="tel" mask="+\1_(000)_000-0000" placeholder="+1 (555) 555-5555" mask-output="alphanumeric"></label>
  <input type="submit">
  <div submit-success>
    <template type="amp-mustache">
      <p>The raw value: {{code}}</p>
      <p>The unmasked value: {{code-unmasked}}</p>
    </template>
  </div>
</form>

The components listed at the beginning of the guides are a great way to get started with AMP. Familiarizing with these helps you get an overview of the different building blocks AMP provides.

Actions and events

As outlined in Interactivity foundations, AMP exposes globally available actions and events. Many of AMP’s components have their own component specific actions and events, made available by use of that component. AMP’s action and event system is a powerful way to implement more complex interaction patterns. In the example below we open a lightbox on a successful form submission.

<form on="submit-success:amp-lightbox-gallery.open(id='squirrel')" method="post" action-xhr="/documentation/examples/api/postal" target="_top">
  <label>Postal code: <input name="code" mask="L0L_0L0" placeholder="A1A 1A1"></label>
  <input type="submit">
  <div submit-success>
    <amp-img src="/static/inline-examples/images/squirrel.jpg" width="320" height="256" lightbox id="squirrel" alt="Photo of a squirrel"></amp-img>
  </div>
</form>

Check out the actions and events overview page to learn more about the different kinds of actions and events available in AMP.

Define reusable actions

If you are chaining multiple actions, you can define them together as a single and reusable action. Use the amp-action-macro component to create AMP action macros. Each action macro needs an id and an action to execute. Call the action macro by it’s id and pass the arguments that alter its behavior.

<amp-action-macro
  id="navigate-action"
  execute="AMP.navigateTo(url='https://amp.dev/')"
></amp-action-macro>

<button on="tap:navigate-action.execute()">amp.dev</button>

Customization continued

This guide has just a few examples of the ways you can use ready-made components to build interactivity. If you have a need for a ready-made component that is not listed, you may file a feature request or declare an intent to implement and contribute it yourself. Otherwise, check out Building personalized interactive experiences for highly customized integration options in AMP.

• Written by @CrystalOnScript
  with contributions from @sbenz