Notification Settings - defuss-shadcn

On this page (3)

Component Skill — components/notification-settings/component-skill.md

Native basis

A <table>: topics as row headers (with a description), channels as column headers, a Checkbox per cell with an aria-label naming both. Or a list of Switches and a frequency Select.

Built from

Checkbox, Switch, Select.

Web Platform APIs

<table>:has()<fieldset>

Classes

.mk-notification-settings.mk-notification-settings-digest

Data attributes

data-variant="list".

§Matrix

A real <table>: topics as row headers, channels as column headers, and a Checkbox in every cell labelled with both ("Mentions by Email").

<div class="mk-notification-settings">
  <table>
    <caption class="sr-only">Notifications by topic and channel</caption>
    <thead><tr><th scope="col">Topic</th><th scope="col">Email</th><th scope="col">Push</th><th scope="col">SMS</th></tr></thead>
    <tbody>
      <tr><th scope="row">Mentions<small>When someone @mentions you</small></th><td><input class="checkbox" type="checkbox" name="mentions" value="email" checked aria-label="Mentions by Email"></td><td><input class="checkbox" type="checkbox" name="mentions" value="push" checked aria-label="Mentions by Push"></td><td><input class="checkbox" type="checkbox" name="mentions" value="sms" aria-label="Mentions by SMS"></td></tr>
      <tr><th scope="row">Comments<small>Replies on your docs and tasks</small></th><td><input class="checkbox" type="checkbox" name="comments" value="email" checked aria-label="Comments by Email"></td><td><input class="checkbox" type="checkbox" name="comments" value="push" aria-label="Comments by Push"></td><td><input class="checkbox" type="checkbox" name="comments" value="sms" aria-label="Comments by SMS"></td></tr>
      <tr><th scope="row">Assignments<small>Tasks assigned to you</small></th><td><input class="checkbox" type="checkbox" name="assignments" value="email" checked aria-label="Assignments by Email"></td><td><input class="checkbox" type="checkbox" name="assignments" value="push" checked aria-label="Assignments by Push"></td><td><input class="checkbox" type="checkbox" name="assignments" value="sms" checked aria-label="Assignments by SMS"></td></tr>
      <tr><th scope="row">Weekly digest<small>A summary every Monday</small></th><td><input class="checkbox" type="checkbox" name="weekly-digest" value="email" checked aria-label="Weekly digest by Email"></td><td><input class="checkbox" type="checkbox" name="weekly-digest" value="push" aria-label="Weekly digest by Push"></td><td><input class="checkbox" type="checkbox" name="weekly-digest" value="sms" aria-label="Weekly digest by SMS"></td></tr>
    </tbody>
  </table>
</div>

§List

data-variant='list': a Switch per topic and how often digests come.

§CSS view file

/* -- Notification Settings (website · Account & States) -------------------

   Controls notification topics and delivery channels - a matrix of topics by channel, or a list of switches with a digest frequency. */

@layer components {

  /* every box in the block measures border-box - the same on any page */

  :where(.mk-notification-settings, .mk-notification-settings *, .mk-notification-settings ::before, .mk-notification-settings ::after) { box-sizing: border-box; }

  .mk-notification-settings { width: 100%; max-width: 44rem; overflow-x: auto; border: 1px solid var(--border);

    border-radius: var(--radius-xl);

    background: var(--card);

    color: var(--card-foreground);

    & table { width: 100%; border-collapse: collapse; }

    & th, & td { padding: 0.875rem 1rem; border-block-end: 1px solid var(--border); }

    & tr:last-child > * { border-block-end: 0; }

    & thead th { color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 600; text-align: center; }

    & thead th:first-child { text-align: start; }

    & tbody th { text-align: start; font-weight: 600; font-size: 0.9375rem; }

    & tbody th small { display: block; color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 400; }

    & td { width: 5.5rem; text-align: center; }

  .mk-notification-settings tbody tr:has(:checked) th { color: var(--foreground); }

  .mk-notification-settings[data-variant="list"] { padding: 0.5rem 1.25rem; overflow: visible;

    & ul { margin: 0; padding: 0; list-style: none; }

    & li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.875rem; border-block-end: 1px solid var(--border); }

    & li label { display: grid; font-weight: 600; font-size: 0.9375rem; }

    & li small { color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 400; }

  .mk-notification-settings-digest { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; font-size: 0.9375rem;

    & .select { width: auto; }

  /* -- Accessibility ------------------------------------------- */

  @media (forced-colors: active) {

    .mk-notification-settings { border-color: CanvasText; }

Comments, ideas or improvements? Edit this page's source on GitHub

Notification SettingsBLK

§CSS view file