Choose a plan
Three plans as a radio group, with the price and what each includes, and one action to continue.
How it’s composed
- Radio group gives the three plans one tab stop with arrow-key navigation, and submits the chosen
valuewith the form. - Badge in the Card’s
actionslot carries the yearly discount without competing with the title. - Button spans the footer so the single next step is unmistakable.
Make it yours
Add a Toggle group above the plans for monthly and yearly billing, and update the prices when it changes.
More patterns
Sign in
Email and password sign-in with a remember-me option, a recovery link and a single primary action.
Password recovery
Request a reset link by email, with a quiet description of what happens next and a route back to sign in.
Verify code
A six-digit one-time code, grouped in threes, with a resend action for the email that never arrived.
Notification settings
Grouped switches for email and push notifications, each with a one-line explanation.
Invite teammates
Invite by email with a role picker, above the list of people who already have access.
Upload progress
A list of files uploading in parallel, each with its own progress and a finished state.
Send feedback
A short rating and an open comment, the two questions that get answered most often.
Schedule a meeting
Pick a day on the calendar and one of the open time slots beside it.
Sound settings
Volume sliders for each channel and a switch for spatial audio.
Profile card
A person, their role and a few numbers, with follow and message actions.
API key
A secret key shown once, with a copy action, a warning and a way to roll it.