Forms

ChoiceGrid

Responsive grid of large selectable choices with roving keyboard focus, selection state, and optional correct/incorrect/pending feedback for quiz and assessment surfaces.

import { ChoiceGrid } from '@lostgradient/cinder/choice-grid';
formselectionquizassessment
01

Overview

Responsive grid of large selectable choices with roving keyboard focus, selection state, and optional correct/incorrect/pending feedback for quiz and assessment surfaces.

Usage

svelte 
<script lang="ts">
  import { ChoiceGrid } from '@lostgradient/cinder/choice-grid';

  let selected = $state<string | null>(null);
</script>

<ChoiceGrid ariaLabel="Choose a difficulty" bind:value={selected}>
  <ChoiceGrid.Item value="easy">Easy</ChoiceGrid.Item>
  <ChoiceGrid.Item value="medium">Medium</ChoiceGrid.Item>
  <ChoiceGrid.Item value="hard">Hard</ChoiceGrid.Item>
</ChoiceGrid>

Guidance

Use When

  • Presenting a small fixed set of large selectable answers where all options should stay visible (quiz or assessment surfaces).
  • Building a touch-friendly selector grid with stable cell dimensions that must not shift when feedback states are applied.

Avoid When

  • Selecting from a long dynamic list — use combobox or select instead.
  • Choosing one of two to five short values in a compact inline context — use segmented-control instead.
Live preview
02

When to use

Use when
  • Presenting a small fixed set of large selectable answers where all options should stay visible (quiz or assessment surfaces).
  • Building a touch-friendly selector grid with stable cell dimensions that must not shift when feedback states are applied.
Avoid when
  • Selecting from a long dynamic list — use combobox or select instead.
  • Choosing one of two to five short values in a compact inline context — use segmented-control instead.
03

Examples

Basic single-select

A simple quiz question with four answer options and roving keyboard focus.

Dense phone layout

Fixed 2-column grid with compact cells — suitable for narrow mobile viewports.

Feedback states

Correct, incorrect, and pending states for quiz and assessment surfaces. Cell dimensions stay stable across states.

Multi-select

Toggle multiple answers simultaneously — useful for checkboxes presented as large tiles.

04

Props

Props for choice-grid
Name Type Default Required Bindable Description
value string | null null bind The currently selected value (single-select mode). Bindable. Pass null or omit to start with no selection.
values string[] [] bind Currently selected values (multi-select mode). Bindable. Only used when multiple is true — set multiple explicitly to switch modes; binding values alone does NOT enable multi-select.
multiple boolean false When true the grid allows multiple simultaneous selections and reads/writes values instead of value. The ARIA role switches to group (items become checkbox); single-select uses radiogroup (items become radio).
columns 'responsive'1234 'responsive' Column layout. - 'responsive' — auto-fill at a minimum cell width (default). - 1 | 2 | 3 | 4 — fixed number of columns.
minColumnWidth text '10rem' Minimum cell width for columns="responsive". Accepts any CSS <length> (e.g. "12rem", "200px"). Default: "10rem".
ariaLabel text Accessible label for the grid (required unless ariaLabelledby is set).
ariaLabelledby text Id of an external element that labels this grid.
disabled boolean false Disables all items in the grid.
children snippet req ChoiceGridItem children.