Forms
Input groups, radio groups, selects, checkboxes, toggles, form layouts, and sign-in forms.
How To Use This Page
Forms sits inside the Application UI part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 9 examples so you can compare structure, emphasis, and density before choosing an implementation direction.
How The Content Is Grouped
- The examples are grouped as a single Application UI reference page so you can compare variations without leaving the route.
- Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.
SECTION 1 — INPUT GROUPS
Input Groups
8 variants
1. With label
2. With label and help text
Used for your public workspace link and internal invites.
3. With leading icon
4. With add-on
5. With trailing icon
6. With validation error
Use only lowercase letters, numbers, and hyphens.
7. With keyboard shortcut
8. With inline leading and trailing add-ons
SECTION 2 — RADIO GROUPS
Radio Groups
4 variants
1. Simple list
2. Cards
3. Small cards
4. Color picker
SECTION 3 — SELECT MENUS
1. Simple native
2. With secondary text
3. Custom with avatar
SECTION 4 — CHECKBOXES
Checkboxes
2 variants
1. Simple list with heading
Notifications
Choose which updates should arrive in your inbox.
2. List with description
SECTION 5 — TOGGLES
Toggles
3 variants
1. Simple toggle
2. With left label and description
Enable automatic renewals
Renew annual plans before they expire and avoid service interruption.
3. Toggle with icon
Day mode
Switch the editor appearance for focused work.
SECTION 6 — FORM LAYOUTS
Form Layouts
2 variants
1. Simple stacked
Tom Cook
tom@example.com
2. Labels on left
SECTION 7 — ACTION PANELS
Action Panels
3 variants
1. Simple
Upgrade to Pro
Add advanced permissions, priority support, and custom automation runs.
2. With toggle
Enable automatic renewals
Keep your plan active and renew invoices without manual approval.
3. With well
Preview notification
See how recipients will experience your message before sending.
Quarterly planning is live
Review dependencies, add comments, and confirm staffing before Wednesday.
SECTION 8 — TEXTAREAS
Textareas
3 variants
1. Simple
121 / 240 characters
2. With avatar and actions
3. With title and pill actions
SECTION 9 — SIGN-IN FORMS
Sign-In Forms
2 variants
1. Simple card
2. Split screen
Build faster with a consistent system
Access shared foundations, reusable patterns, and the latest release notes for every application team.
Welcome back
Sign in with the account you use for internal tools.