A tile component is a form of selection that can be used in place of a radio button and is commonly used in forms. A tile appears visually similar to a selectable card. However, tiles are used specifically when the user is selecting a static option, whereas a selectable card triggers an action or opens a quickstart or sidebar to provide additional information.


When to use

  • The selection process would benefit from having the additional visual prominence that tiles provide.
  • The selection includes additional information, like a brief description or an icon.
  • The selection consists of brief, static content.
  • There are few (typically 2-6) selections for the user to choose from.

When not to use

  • The option presented to the user includes an action link, button, or overflow menu. Instead, use a card.
  • The option presented to the user requires more than 3 lines of content description. Instead, use a card.
  • The option opens an additional resource or triggers an action. Instead, use a card.


behavior example


As the user hovers over the tile component, the color will change insinuating its clickability. Once the user chooses the title, it will appear with a blue border showing it has been selected.

behavior example



default example


subtext example


icon example
View source on GitHub