Autocomplete

Grace Hopper Anita Borg Ada Lovelace

Button

Google search Google home favorite

Button toggle

Single selection

Ketchup Mustard Mayo

Multi selection

Ketchup Mustard Mayo

Standalone

Hyperspinner enabled

Card

Simple card Complicated card Subtitle

This is some stuff

And more stuff

Hurray

Checkbox

With a label Without a label

Chips

Barbeque Cheddar Sea Salt and Vinegar Manta Ray Tomato Scallion Cilantro

Datepicker

Disabled datepicker

Grid list

Fry Leela Amy Bender

Icon

grade

Input

Surname .00 Dolla dolla bills Recession

List

Robot Android Cyborg Search Find Seek

Menu

Progress bar

Progress spinner

Radio buttons

Radio group

Charmander Squirtle Bulbasaur

Standalone radios

White Yellow Green Red

Select

Glass Ceramic Steel

Sidenav

On the side Main content

Slide-toggle

With a label Without a label

Slider

Tabs

The overview API docs The API docs

Paginator

Toolbar

Basic toolbar Multi row Toolbar

Sort

Name Calories Fat Carbs Protein
Cupcake 305 4 67 4

Tooltip

Autosize textarea

Expansion Panel

This is a panel description. Panel Title This is the content text that makes sense here. Action

CDK Table

ID {{row.userId}}

Material Table

ID {{row.userId}}

Native table with sticky header and footer

ID {{row.userId}} ID

Selection list

Groceries

Apples Bananas Oranges

Vertical Stepper

Content 1 Content 2

Vertical Stepper (with label template)

NgTemplate Label #1 Content 1 NgTemplate Label #2 Content 2

Horizontal Stepper

Content 1 Content 2

Focus trap

Badge

Drag and Drop

Virtual scroll

Item #{{i}}

YouTube player

Google Map

Hello