button

accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus lobortis massa. Nunc massa sapien, faucibus in tortor at, sollicitudin porta nulla.

Vivamus vel lacus nec leo ullamcorper congue euismod ut massa. In hac habitasse platea dictumst. Etiam accumsan diam tristique justo maximus, rhoncus euismod velit laoreet. Aenean tristique fermentum ligula sed lacinia. Pellentesque dapibus, orci quis posuere egestas, metus mi ullamcorper erat, quis consectetur odio elit sed ipsum. Ut sit amet semper ante. Nulla aliquam eros justo, id semper ex mollis sit amet.

Aliquam nisi tellus, mattis in ligula sit amet, aliquet ornare nisl. Aliquam luctus ut metus et elementum. Etiam fringilla congue nisi, at tristique est. Vestibulum quam neque, viverra id laoreet sit amet, finibus ac lectus. Duis pellentesque nisi vel convallis euismod.

tabs

Nam auctor augue eros, eget ullamcorper elit faucibus vitae.

table

ExtensionVersion
Angular (2+)Google.ts9/13/201621
ReactMeta.tsx5/28/201319
VueEvan.vue2/3/20143.5
SvelteFOSS.svelte10/31/20165.3.8
Carousel Demo
Too Few Items

pagination

  • Enter at least 1
  • Enter at least 1

notification

0dynamic

basic modal

Basic modal with no confirm nor cancel buttons

basic modal

Basic modal using custom label, different from title

role="alertdialog"

You must provide confirm and / or cancel buttons, otherwise no way to close!

both buttons

This has confirm and cancel buttons

and very long content

basic drawer

Basic modal with no confirm nor cancel buttons

role="alertdialog"

You must provide confirm and / or cancel buttons, otherwise no way to close!

both buttons

This has confirm and cancel buttons.

form-input

fields marked with * are required

  • idk just something custom
  • Enter at least 8 characters
  • Enter at most 16 characters
  • Enter 8 to 16 characters
  • Enter at least 10
  • Enter at most 100
  • Enter 10 to 100

form-textarea

fields marked with * are required

  • Enter at least 8 characters
  • Enter at most 16 characters
  • Enter 8 to 16 characters

form-checkbox

form-toggle

form-radio

fields marked with * are required

optional
*required
disabled

form-select

fields marked with * are required

form-range

6oz 8oz 12oz 16oz 20oz
50 100

Form with multiple types

fields marked with * are required

*favorite
{
  "first_name": "",
  "last_name": "",
  "email": "",
  "feedback": "",
  "state": "",
  "favorite": "",
  "confirm": false
}