Toggles — Checkbox tile grid

Seven day tiles combine independent checkboxes with visible check marks. Use them to select a recurring schedule while preserving clear names and disabled states.

ReactHTML

1440 × 480

Open in new tab

Component.tsx47 lines

export default function TogglesCheckboxTileGrid() {
  return (
    <fieldset aria-describedby="toggles-checkbox-tile-grid-hint toggles-checkbox-tile-grid-note" className="w-72 text-neutral-900 sm:w-[28rem]">
      <legend className="text-sm font-semibold">Choose days</legend>
      <p id="toggles-checkbox-tile-grid-hint" className="mt-1 text-sm text-neutral-500">Select every day that applies</p>
      <div className="mt-3 grid grid-cols-4 gap-2 sm:grid-cols-7">
        <label className="group relative flex h-14 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-neutral-300 bg-white text-sm font-medium text-neutral-900 transition-colors has-checked:border-neutral-900 has-checked:bg-neutral-900 has-checked:text-white has-enabled:hover:bg-neutral-50 has-checked:has-enabled:hover:bg-neutral-700 has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:border-[ButtonText] forced-colors:has-checked:bg-[Highlight] forced-colors:has-checked:text-[HighlightText]">
          <input type="checkbox" name="toggles-checkbox-tile-grid-days" value="monday" aria-label="Monday" defaultChecked className="sr-only focus-visible:outline-hidden" />
          <span aria-hidden="true">Mon</span>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3.5 opacity-0 group-has-checked:opacity-100"><path d="m5 12 4 4L19 6" /></svg>
        </label>
        <label className="group relative flex h-14 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-neutral-300 bg-white text-sm font-medium text-neutral-900 transition-colors has-checked:border-neutral-900 has-checked:bg-neutral-900 has-checked:text-white has-enabled:hover:bg-neutral-50 has-checked:has-enabled:hover:bg-neutral-700 has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:border-[ButtonText] forced-colors:has-checked:bg-[Highlight] forced-colors:has-checked:text-[HighlightText]">
          <input type="checkbox" name="toggles-checkbox-tile-grid-days" value="tuesday" aria-label="Tuesday" className="sr-only focus-visible:outline-hidden" />
          <span aria-hidden="true">Tue</span>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3.5 opacity-0 group-has-checked:opacity-100"><path d="m5 12 4 4L19 6" /></svg>
        </label>
        <label className="group relative flex h-14 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-neutral-300 bg-white text-sm font-medium text-neutral-900 transition-colors has-checked:border-neutral-900 has-checked:bg-neutral-900 has-checked:text-white has-enabled:hover:bg-neutral-50 has-checked:has-enabled:hover:bg-neutral-700 has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:border-[ButtonText] forced-colors:has-checked:bg-[Highlight] forced-colors:has-checked:text-[HighlightText]">
          <input type="checkbox" name="toggles-checkbox-tile-grid-days" value="wednesday" aria-label="Wednesday" defaultChecked className="sr-only focus-visible:outline-hidden" />
          <span aria-hidden="true">Wed</span>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3.5 opacity-0 group-has-checked:opacity-100"><path d="m5 12 4 4L19 6" /></svg>
        </label>
        <label className="group relative flex h-14 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-neutral-300 bg-white text-sm font-medium text-neutral-900 transition-colors has-checked:border-neutral-900 has-checked:bg-neutral-900 has-checked:text-white has-enabled:hover:bg-neutral-50 has-checked:has-enabled:hover:bg-neutral-700 has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:border-[ButtonText] forced-colors:has-checked:bg-[Highlight] forced-colors:has-checked:text-[HighlightText]">
          <input type="checkbox" name="toggles-checkbox-tile-grid-days" value="thursday" aria-label="Thursday" className="sr-only focus-visible:outline-hidden" />
          <span aria-hidden="true">Thu</span>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3.5 opacity-0 group-has-checked:opacity-100"><path d="m5 12 4 4L19 6" /></svg>
        </label>
        <label className="group relative flex h-14 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-neutral-300 bg-white text-sm font-medium text-neutral-900 transition-colors has-checked:border-neutral-900 has-checked:bg-neutral-900 has-checked:text-white has-enabled:hover:bg-neutral-50 has-checked:has-enabled:hover:bg-neutral-700 has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:border-[ButtonText] forced-colors:has-checked:bg-[Highlight] forced-colors:has-checked:text-[HighlightText]">
          <input type="checkbox" name="toggles-checkbox-tile-grid-days" value="friday" aria-label="Friday" defaultChecked className="sr-only focus-visible:outline-hidden" />
          <span aria-hidden="true">Fri</span>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3.5 opacity-0 group-has-checked:opacity-100"><path d="m5 12 4 4L19 6" /></svg>
        </label>
        <label className="group relative flex h-14 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-neutral-300 bg-white text-sm font-medium text-neutral-900 transition-colors has-checked:border-neutral-900 has-checked:bg-neutral-900 has-checked:text-white has-enabled:hover:bg-neutral-50 has-checked:has-enabled:hover:bg-neutral-700 has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:border-[ButtonText] forced-colors:has-checked:bg-[Highlight] forced-colors:has-checked:text-[HighlightText]">
          <input type="checkbox" name="toggles-checkbox-tile-grid-days" value="saturday" aria-label="Saturday" className="sr-only focus-visible:outline-hidden" />
          <span aria-hidden="true">Sat</span>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3.5 opacity-0 group-has-checked:opacity-100"><path d="m5 12 4 4L19 6" /></svg>
        </label>
        <label className="group relative flex h-14 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-neutral-300 bg-white text-sm font-medium text-neutral-900 transition-colors has-checked:border-neutral-900 has-checked:bg-neutral-900 has-checked:text-white has-enabled:hover:bg-neutral-50 has-checked:has-enabled:hover:bg-neutral-700 has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:border-[ButtonText] forced-colors:has-checked:bg-[Highlight] forced-colors:has-checked:text-[HighlightText]">
          <input type="checkbox" name="toggles-checkbox-tile-grid-days" value="sunday" aria-label="Sunday" disabled className="sr-only focus-visible:outline-hidden" />
          <span aria-hidden="true">Sun</span>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3.5 opacity-0 group-has-checked:opacity-100"><path d="m5 12 4 4L19 6" /></svg>
        </label>
      </div>
      <p id="toggles-checkbox-tile-grid-note" className="mt-3 text-xs text-neutral-500">Short schedule guidance</p>
    </fieldset>
  )
}

Pattern notes

When to use: Use for independent recurring-day selection. Pick toggles-radio-cards for one choice or toggles-checkbox-nested for dependent visibility. Variations: start only weekdays checked, enable all seven days, or replace days with short named availability slots while keeping full accessible names.
Hierarchy: Read Choose days and its one-line instruction, then Monday through Sunday in chronological order. Visible labels are three-letter abbreviations; native checkbox aria-labels use full day names, and decoration is aria-hidden. The fieldset links both hint and final note with aria-describedby. Guidance stays under five words.
Responsive: Below 640px the 288px fieldset has four tiles on the first row and three on the second, each 66px wide. From 640px the 448px fieldset has seven equal tiles in one row, about 57px wide. Tile height, icon size and gaps remain unchanged. The overall height is about 200px on mobile and 140px on desktop.
Layout: A 288px (w-72) fieldset widens to 448px (sm:w-[28rem]). A 14px semibold legend is followed by a 14px neutral-500 hint after 4px, then tiles after 12px (mt-3). Below 640px a four-column grid with 8px gaps creates rows of four and three; from 640px a seven-column row keeps gap-2. Tiles are 56px high (h-14), rounded-md, with a 1px neutral-300 border. Each centres a 14px medium abbreviation above a 14px check glyph with a 4px gap. A 12px guidance note follows by 12px.
States: Monday, Wednesday and Friday start checked. Checked labels have neutral-900 borders and fills with white text; their check glyphs use opacity-0/group-has-checked:opacity-100 so selected state is never fill alone. Enabled unchecked hover fills neutral-50 and checked hover neutral-700. Sunday is native disabled with 50% opacity and a not-allowed cursor. Labels show 2px neutral-900 focus outlines offset 2px through has-[:focus-visible], while hidden inputs use focus-visible:outline-hidden. Forced colors use ButtonText borders and Highlight/HighlightText checked fills and ink; check marks stay visible.

Desktop wireframe

┌────────────────────────────────────────────────────┐
│ Choose days                                        │
│ Select every day that applies                      │
│ [Mon x][Tue][Wed x][Thu][Fri x][Sat][Sun disabled] │
│ Short schedule guidance                            │
└────────────────────────────────────────────────────┘

View all

Toggles — Checkbox group with nested options
Layout tags: stacked,form,compact
Toggles — Checklist rows with descriptions
Layout tags: list,form,compact
Toggles — Consent row with a separate explanation
Layout tags: stacked,form,compact

Toggles — Checkbox tile grid

Pattern notes

More in Toggles

Toggles — Checkbox group with nested options

Toggles — Checklist rows with descriptions

Toggles — Consent row with a separate explanation