Dropdowns — Picker with option tiles

An input-shaped time disclosure opens a three-column grid of radio tiles. Use it to choose one time from a short list of slots.

ReactHTML

1440 × 480

Open in new tab

Component.tsx54 lines

export default function DropdownsTilePicker() {
  return (
    <div className="group relative h-64 w-72 text-neutral-900 sm:w-80">
      <p id="dropdowns-tile-picker-label" className="text-sm font-medium">Time</p>
      <details open className="group mt-2">
        <summary aria-labelledby="dropdowns-tile-picker-label dropdowns-tile-picker-value" aria-describedby="dropdowns-tile-picker-note" className="flex h-10 cursor-pointer list-none items-center gap-2 rounded-md border border-neutral-300 bg-white px-3 text-sm transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
          <span id="dropdowns-tile-picker-value" className="flex-1 tabular-nums">
            <span className="hidden group-has-[#dropdowns-tile-picker-0900:checked]:inline">09:00</span>
            <span className="hidden group-has-[#dropdowns-tile-picker-0930:checked]:inline">09:30</span>
            <span className="hidden group-has-[#dropdowns-tile-picker-1000:checked]:inline">10:00</span>
            <span className="hidden group-has-[#dropdowns-tile-picker-1030:checked]:inline">10:30</span>
            <span className="hidden group-has-[#dropdowns-tile-picker-1100:checked]:inline">11:00</span>
            <span className="hidden group-has-[#dropdowns-tile-picker-1130:checked]:inline">11:30</span>
          </span>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg>
        </summary>
        <div className="absolute top-[68px] left-0 mt-1 w-full rounded-md border border-neutral-200 bg-white p-3 shadow-lg">
          <p className="text-xs text-neutral-500">Today, Mar 14</p>
          <fieldset className="mt-3">
            <legend className="sr-only">Choose a time</legend>
            <div className="grid grid-cols-3 gap-2">
              <label className="flex h-10 cursor-pointer items-center justify-center rounded-md border border-neutral-300 bg-white text-sm tabular-nums text-neutral-900 transition-colors hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:bg-neutral-900 has-[:checked]:font-medium has-[:checked]:text-white has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight] forced-colors:has-[:checked]:bg-[Highlight] forced-colors:has-[:checked]:text-[HighlightText]">
                <input id="dropdowns-tile-picker-0900" type="radio" name="dropdowns-tile-picker" aria-describedby="dropdowns-tile-picker-note" defaultChecked className="sr-only focus-visible:outline-hidden" />
                09:00
              </label>
              <label className="flex h-10 cursor-pointer items-center justify-center rounded-md border border-neutral-300 bg-white text-sm tabular-nums text-neutral-900 transition-colors hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:bg-neutral-900 has-[:checked]:font-medium has-[:checked]:text-white has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight] forced-colors:has-[:checked]:bg-[Highlight] forced-colors:has-[:checked]:text-[HighlightText]">
                <input id="dropdowns-tile-picker-0930" type="radio" name="dropdowns-tile-picker" aria-describedby="dropdowns-tile-picker-note" className="sr-only focus-visible:outline-hidden" />
                09:30
              </label>
              <label className="flex h-10 cursor-pointer items-center justify-center rounded-md border border-neutral-300 bg-white text-sm tabular-nums text-neutral-900 transition-colors hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:bg-neutral-900 has-[:checked]:font-medium has-[:checked]:text-white has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight] forced-colors:has-[:checked]:bg-[Highlight] forced-colors:has-[:checked]:text-[HighlightText]">
                <input id="dropdowns-tile-picker-1000" type="radio" name="dropdowns-tile-picker" aria-describedby="dropdowns-tile-picker-note" className="sr-only focus-visible:outline-hidden" />
                10:00
              </label>
              <label className="flex h-10 cursor-pointer items-center justify-center rounded-md border border-neutral-300 bg-white text-sm tabular-nums text-neutral-900 transition-colors hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:bg-neutral-900 has-[:checked]:font-medium has-[:checked]:text-white has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight] forced-colors:has-[:checked]:bg-[Highlight] forced-colors:has-[:checked]:text-[HighlightText]">
                <input id="dropdowns-tile-picker-1030" type="radio" name="dropdowns-tile-picker" aria-describedby="dropdowns-tile-picker-note" className="sr-only focus-visible:outline-hidden" />
                10:30
              </label>
              <label className="flex h-10 cursor-pointer items-center justify-center rounded-md border border-neutral-300 bg-white text-sm tabular-nums text-neutral-900 transition-colors hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:bg-neutral-900 has-[:checked]:font-medium has-[:checked]:text-white has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight] forced-colors:has-[:checked]:bg-[Highlight] forced-colors:has-[:checked]:text-[HighlightText]">
                <input id="dropdowns-tile-picker-1100" type="radio" name="dropdowns-tile-picker" aria-describedby="dropdowns-tile-picker-note" className="sr-only focus-visible:outline-hidden" />
                11:00
              </label>
              <label className="flex h-10 cursor-not-allowed items-center justify-center rounded-md border border-neutral-300 bg-white text-sm tabular-nums text-neutral-600 line-through opacity-50">
                <input id="dropdowns-tile-picker-1130" type="radio" name="dropdowns-tile-picker" aria-describedby="dropdowns-tile-picker-note" disabled className="sr-only focus-visible:outline-hidden" />
                11:30
              </label>
            </div>
          </fieldset>
          <p id="dropdowns-tile-picker-note" className="mt-3 text-xs text-neutral-500">Times use your local zone.</p>
        </div>
      </details>
    </div>
  )
}

Pattern notes

When to use: Use for one choice from a small set of short values. Choose dropdowns-select-descriptions when options need explanations or dropdowns-filter-checkboxes for several selections. Variations: use duration values, choose a different initial time, or disable another unavailable tile.
Hierarchy: Read Time and its current value, the date heading, six short time choices and the timezone note. Values are five-character times with tabular figures. The summary is named by the visible label and selected-value span. A fieldset legend identifies Choose a time, and the note describes the trigger and every radio with aria-describedby.
Responsive: The root and full-width panel grow from 288px to 320px at 640px. The grid remains three equal columns and two rows, with unchanged tile heights and 8px gaps. Date and note fit on one line at both widths.
Layout: A relative 288px (w-72) by 256px (h-64) root grows to 320px (sm:w-80) wide at 640px. The Time label sits 8px above a 40px summary containing a 16px clock, selected value and chevron. The full-width panel begins 4px below, with a rounded-md border, 12px padding and shadow-lg. A 12px date heading precedes a three-column grid by 12px. Six 40px tiles have 8px gaps; a 12px note follows by 12px.
States: The disclosure is open and 09:00 starts checked. Only the checked value span displays in the trigger, including while closed. Enabled tiles hover neutral-50. Checked tiles use neutral-900 fill and border, white medium text and a Highlight border/background with HighlightText in forced colors. Native radio focus draws a 2px inset label outline. 11:30 is disabled, struck through and 50% opaque. The summary uses the standard focus outline and open chevron rotation. Arrow keys switch enabled times.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ Time                                                 │
│ [Clock 09:00                               ^]        │
│ ┌──────────────────────────────────────────────┐     │
│ │ Today, Mar 14                                │     │
│ │ [09:00]       [09:30]       [10:00]          │     │
│ │ [10:30]       [11:00]       [11:30]          │     │
│ │ Short note about availability.               │     │
│ └──────────────────────────────────────────────┘     │
└──────────────────────────────────────────────────────┘

View all

Dropdowns — Account menu with profile header
Layout tags: layered,icons,compact
Dropdowns — Action menu with sections and shortcuts
Layout tags: layered,icons,compact
Dropdowns — Breadcrumb branch disclosure
Layout tags: layered,list,compact

Dropdowns — Picker with option tiles

Pattern notes

More in Dropdowns

Dropdowns — Account menu with profile header

Dropdowns — Action menu with sections and shortcuts

Dropdowns — Breadcrumb branch disclosure