Toggles — Icon radio choice grid

Four layout radios appear as a two-column icon grid with short labels and checked markers. Use for a small set of visual presentation choices.

ReactHTML

1440 × 480

Open in new tab

Component.tsx22 lines

export default function TogglesIconChoiceGrid() {
  return (
    <fieldset className="w-72 text-neutral-900 sm:w-96"><legend className="mb-3 text-sm font-semibold">Display layout</legend>
    <div className="grid grid-cols-2 gap-3"><label className="flex min-h-24 cursor-pointer flex-col rounded-md border border-neutral-300 bg-white p-3 text-sm text-neutral-600 hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:bg-neutral-50 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight] has-[:checked]:[&_svg:last-child]:opacity-100"><input className="peer sr-only focus-visible:outline-hidden" id="toggles-icon-choice-grid-grid" name="toggles-icon-choice-grid" value="grid" type="radio" aria-describedby="toggles-icon-choice-grid-hint" defaultChecked />
    <span className="flex items-center justify-between"><svg className="size-6" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
    <svg className="size-4 opacity-0" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4L19 6" /></svg></span>
    <span className="mt-3">Grid</span></label>
    <label className="flex min-h-24 cursor-pointer flex-col rounded-md border border-neutral-300 bg-white p-3 text-sm text-neutral-600 hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:bg-neutral-50 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight] has-[:checked]:[&_svg:last-child]:opacity-100"><input className="peer sr-only focus-visible:outline-hidden" id="toggles-icon-choice-grid-list" name="toggles-icon-choice-grid" value="list" type="radio" aria-describedby="toggles-icon-choice-grid-hint"  />
    <span className="flex items-center justify-between"><svg className="size-6" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1" /></svg>
    <svg className="size-4 opacity-0" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4L19 6" /></svg></span>
    <span className="mt-3">List</span></label>
    <label className="flex min-h-24 cursor-pointer flex-col rounded-md border border-neutral-300 bg-white p-3 text-sm text-neutral-600 hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:bg-neutral-50 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight] has-[:checked]:[&_svg:last-child]:opacity-100"><input className="peer sr-only focus-visible:outline-hidden" id="toggles-icon-choice-grid-columns" name="toggles-icon-choice-grid" value="columns" type="radio" aria-describedby="toggles-icon-choice-grid-hint"  />
    <span className="flex items-center justify-between"><svg className="size-6" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M12 4v16" /></svg>
    <svg className="size-4 opacity-0" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4L19 6" /></svg></span>
    <span className="mt-3">Columns</span></label>
    <label className="flex min-h-24 cursor-pointer flex-col rounded-md border border-neutral-300 bg-white p-3 text-sm text-neutral-600 hover:bg-neutral-50 has-[:checked]:border-neutral-900 has-[:checked]:bg-neutral-50 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight] has-[:checked]:[&_svg:last-child]:opacity-100"><input className="peer sr-only focus-visible:outline-hidden" id="toggles-icon-choice-grid-rows" name="toggles-icon-choice-grid" value="rows" type="radio" aria-describedby="toggles-icon-choice-grid-hint"  />
    <span className="flex items-center justify-between"><svg className="size-6" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M3 12h18" /></svg>
    <svg className="size-4 opacity-0" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4L19 6" /></svg></span>
    <span className="mt-3">Rows</span></label></div>
    <p className="mt-3 text-xs text-neutral-500" id="toggles-icon-choice-grid-hint">Choose one layout for the content.</p></fieldset>
  )
}

Pattern notes

When to use: Use for mutually exclusive layouts that benefit from an icon. Choose a compact segmented control for a single-row switch. Variations: replace Rows with Gallery, change the selected layout, or show only two choices.
Hierarchy: Read Display layout, then Grid, List, Columns and Rows in row order. Every option is a native radio with a visible one-word label and a shared described-by hint. Decorative icons support the labels.
Responsive: The root grows from 288px to 384px at 640px. The four choices remain in two columns and two rows, with identical icon and label placement at both sizes.
Layout: A 288px fieldset grows to 384px at sm. The two-column grid has 12px gaps and minimum 96px choices with 12px padding. Each card pairs a 24px icon and 16px check marker, then a 14px label 12px below. The hint follows the grid by 12px.
States: Grid starts selected. Checked cards use a neutral-900 border, medium text and a check marker shown with opacity. Forced colors use a Highlight border. Radio keyboard focus outlines the label; arrow keys change the selection. Hover fills neutral-50.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ Display layout                                       │
│ ┌──────────────────────┐  ┌──────────────────────┐   │
│ │ Icon           Check │  │ Icon                 │   │
│ │ [Grid]               │  │ [List]               │   │
│ └──────────────────────┘  └──────────────────────┘   │
│ ┌──────────────────────┐  ┌──────────────────────┐   │
│ │ Icon                 │  │ Icon                 │   │
│ │ [Columns]            │  │ [Rows]               │   │
│ └──────────────────────┘  └──────────────────────┘   │
│ Choose one layout for the content.                   │
└──────────────────────────────────────────────────────┘

View all

Toggles — Checkbox group with nested options
Layout tags: stacked,form,compact
Toggles — Checkbox tile grid
Layout tags: grid,form,compact
Toggles — Checklist rows with descriptions
Layout tags: list,form,compact

Toggles — Icon radio choice grid

Pattern notes

More in Toggles

Toggles — Checkbox group with nested options

Toggles — Checkbox tile grid

Toggles — Checklist rows with descriptions