Notification settings

Grouped switches for email and push notifications, each with a one-line explanation.

Built withcardfieldswitch
Notification settings
Default density Compact density Restart from the initial state Show the copyable source

Notifications

Choose what we tell you about, and where.

<tp-card style="inline-size:min(100%, 26rem)"> <h2 slot="header">Notifications</h2> <p slot="description">Choose what we tell you about, and where.</p> <div style="display:grid;gap:var(--tp-space-5)"> <tp-field orientation="horizontal" label="Mentions" description="When someone mentions you in a comment."> <tp-switch name="mentions" default-checked></tp-switch> </tp-field> <tp-field orientation="horizontal" label="Pull requests" description="Reviews and merges on your work."> <tp-switch name="reviews" default-checked></tp-switch> </tp-field> <tp-field orientation="horizontal" label="Weekly digest" description="A summary every Monday morning."> <tp-switch name="digest"></tp-switch> </tp-field> <tp-field orientation="horizontal" label="Product news" description="New features, at most once a month."> <tp-switch name="news"></tp-switch> </tp-field> </div> </tp-card>

How it’s composed

  • Field with orientation="horizontal" puts the label and description on one side and the Switch on the other, and clicking the label toggles it.
  • Switch commits immediately, which suits settings that take effect without a save button.

Make it yours

Save each change as it happens and confirm with a quiet toast, or add a Tabs row for Email, Push and In-app channels.

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.

Invite teammates

Invite by email with a role picker, above the list of people who already have access.

Choose a plan

Three plans as a radio group, with the price and what each includes, and one action to continue.

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.