Toggle shows and hides a block of content.

Developer Documentation

Information on how to implement this component is available for the following technologies.


Use Toggle when you need to toggle the visibility of a block of content. For example, a disclaimer.


  • By default, Toggle content is hidden, so high-priority content should be avoided.
  • If you are using several Toggle components in succession, consider the Accordion component.
  • The content within a Toggle should be kept short and relevant to its context for maximum usability.
  • Keep the text of the Toggle trigger short.


  • A Toggle component must have an element that triggers visibility of the Toggle content.
  • A Toggle component must have a content area.