Skip to content

CSS

The styleguide ships the calendar, not the whole picker. .tng-calendar is a seven-column grid; the trigger field around it is Field and the surface it opens into is Dropdown. Compose the three yourself — the Recipe below shows the finished result.

.tng-calendar-header, .tng-calendar-weekdays and each .tng-calendar-week span all seven columns and pick the tracks up again through subgrid. The ARIA grid wrappers (role="grid" on the month, role="gridcell" on each day) are display: contents, so the semantics cost nothing in layout — keep them.

Day cells are plain <button> elements. Four looks ship: the default, .is-selected for the chosen date, .is-today for the current date, and native disabled for days outside the month or outside the allowed range. Selection uses .is-selected rather than [aria-selected] because that is what the CSS targets today — set both, as the snippet does, so the visual and the semantic stay in step.

<div class="tng-calendar">
  <div class="tng-calendar-header">
    <button
      class="tng-icon-button is-ghost"
      type="button"
      aria-label="Previous month"
    >
      <i class="tng-icon icon-chevron-left" aria-hidden="true"></i>
    </button>
    <h2 class="tng-text-body" id="calendar-month" aria-live="polite">
      March 2026
    </h2>
    <button
      class="tng-icon-button is-ghost"
      type="button"
      aria-label="Next month"
    >
      <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
    </button>
  </div>
  <div role="grid" aria-labelledby="calendar-month">
    <div class="tng-calendar-weekdays" role="row">
      <div role="columnheader" aria-label="Monday">Mon</div>
      <div role="columnheader" aria-label="Tuesday">Tue</div>
      <div role="columnheader" aria-label="Wednesday">Wed</div>
      <div role="columnheader" aria-label="Thursday">Thu</div>
      <div role="columnheader" aria-label="Friday">Fri</div>
      <div role="columnheader" aria-label="Saturday">Sat</div>
      <div role="columnheader" aria-label="Sunday">Sun</div>
    </div>
    <div class="tng-calendar-week" role="row">
      <div role="gridcell">
        <button type="button" disabled aria-label="February 23, 2026">
          23
        </button>
      </div>
      <div role="gridcell">
        <button type="button" disabled aria-label="February 24, 2026">
          24
        </button>
      </div>
      <div role="gridcell">
        <button type="button" disabled aria-label="February 25, 2026">
          25
        </button>
      </div>
      <div role="gridcell">
        <button type="button" disabled aria-label="February 26, 2026">
          26
        </button>
      </div>
      <div role="gridcell">
        <button type="button" disabled aria-label="February 27, 2026">
          27
        </button>
      </div>
      <div role="gridcell">
        <button type="button" disabled aria-label="February 28, 2026">
          28
        </button>
      </div>
      <div role="gridcell">
        <button type="button" aria-label="March 1, 2026">1</button>
      </div>
    </div>
    <div class="tng-calendar-week" role="row">
      <div role="gridcell">
        <button type="button" aria-label="March 9, 2026">9</button>
      </div>
      <div role="gridcell">
        <button type="button" aria-label="March 10, 2026">10</button>
      </div>
      <div role="gridcell">
        <button
          type="button"
          class="is-selected"
          aria-selected="true"
          aria-label="March 11, 2026"
        >
          11
        </button>
      </div>
      <div role="gridcell">
        <button type="button" aria-label="March 12, 2026">12</button>
      </div>
      <div role="gridcell">
        <button type="button" aria-label="March 13, 2026">13</button>
      </div>
      <div role="gridcell">
        <button type="button" aria-label="March 14, 2026">14</button>
      </div>
      <div role="gridcell">
        <button type="button" aria-label="March 15, 2026">15</button>
      </div>
    </div>
    <div class="tng-calendar-week" role="row">
      <div role="gridcell">
        <button type="button" aria-label="March 23, 2026">23</button>
      </div>
      <div role="gridcell">
        <button type="button" aria-label="March 24, 2026">24</button>
      </div>
      <div role="gridcell">
        <button type="button" aria-label="March 25, 2026">25</button>
      </div>
      <div role="gridcell">
        <button
          type="button"
          class="is-today"
          aria-current="date"
          aria-label="March 26, 2026"
        >
          26
        </button>
      </div>
      <div role="gridcell">
        <button type="button" aria-label="March 27, 2026">27</button>
      </div>
      <div role="gridcell">
        <button type="button" aria-label="March 28, 2026">28</button>
      </div>
      <div role="gridcell">
        <button type="button" aria-label="March 29, 2026">29</button>
      </div>
    </div>
  </div>
</div>

March 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun

.tng-calendar has no width of its own — it fills whatever box it is placed in, and aspect-ratio: 1 on the day cells means the calendar grows as tall as it is wide. Constrain the surface it sits in (Figma caps the picker at 400px) rather than the calendar itself.

Recipes

Section titled “Recipes”
DD/MM/YYYY
source code