Getting started

Install Usage Guidelines Contribute Release

Foundation

Colors Icons Shadows

Layout

Typography

Code Definition Heading Paragraph Section Heading Text

Navigation

Link Link Button

Feedback

Alert Badge Empty State Global Alert Progress Bar Progress Circle Skeleton Spinner Stats Status Indicator Toast Variable

Overlay

Dialog Confirmation Dialog Drawer Full Screen Modal Filter Menu Menu Tooltip

Forms

Form Elements Badge Input Button Button Group Checkbox Checkbox Group Clipboard Button Combobox Editable Description Editable Heading Editable Text File Input Form Field Icon Button Multi Select Number Input Radio Search Input Segmented Control Select Slider Slug Input Switch Tabbed Combobox Textarea Text Input Toggle Button

Other

Avatar Code Snippet Icon Box Tabs Tab Nav

Upsells

Upsell Button Upsell Card Upsell Heading Upsell Success Dialog

Form Elements

This page displays all form components together to visualize how they appear on different surfaces.

Background:

White

Light

Gray

New team member

Full name*

Email*

Age

Role*

Department

Skills

Tags

Search team

Bio

Tell us about this team member

Experience level

Work schedule

Part-time

Full-time

Contract

Resume(optional)

Drag & drop your file here, or

Only pdf, doc, docx. 10 MB max.

Notifications

I agree to the terms and conditions

Receive newsletter and updates

Preferred contact method

Email

Phone

Slack

Send onboarding updates to manager

#

Compare how form elements look at different sizes (sm, md, lg).

Background:

White

Light

Gray

Small (24px)

Medium (32px)

Large (40px)

On this page

Size comparison