PickOne

PickOne presents one question per row with a set of choices. Only one answer is correct. Renders as buttons (default), radio group, or dropdown based on variant.

Import

import { PickOne } from '@bside-tech/tbx-ui/components';

Example

What is the capital of France?
Which planet is closest to the Sun?

<PickOne
  entries={[
    {
      text: 'What is the capital of France?',
      choices: [
        { value: 'london', label: 'London' },
        { value: 'paris', label: 'Paris' },
        { value: 'berlin', label: 'Berlin' },
      ],
      answer: 'paris',
    },
    {
      text: 'Which planet is closest to the Sun?',
      choices: [
        { value: 'venus', label: 'Venus' },
        { value: 'mercury', label: 'Mercury' },
        { value: 'mars', label: 'Mars' },
      ],
      answer: 'mercury',
    },
  ]}
/>

Style

Tailwind v4 is available for all customisations. Pass classes via the classNames prop, or override CSS variables for fine-grained control.

CSS Classes

Key	Element
`root`	Root wrapper
`list`	Question list (ul)
`item`	Each question row (li)
`text`	Question text
`options`	Options container
`option`	Each option button
`trigger`	Dropdown trigger (variant="dropdown")
`dropdown`	Dropdown panel
`checkButton`	Check button
`resetButton`	Reset button
`result`	Results text

CSS Variables

Scoped under .tbx-pickone:

Variable	Purpose
`--pickone-option-bg`	Option button background (default)
`--pickone-option-bg-selected`	Option button background when selected (before validation). Uses `color-mix` with `--exercise-accent-color`.
`--pickone-option-border-selected`	Option button border when selected (before validation). Uses `--exercise-accent-color`.
`--pickone-item-border`	Row divider
`--pickone-action-bg`, `--pickone-action-border`	Check/Reset button background and border
`--pickone-result-neutral`, `--pickone-result-correct`, `--pickone-result-wrong`	Results text colors (neutral, correct, wrong)
`--pickone-correct-bg`, `--pickone-correct-border`	Correct answer highlight
`--pickone-wrong-bg`, `--pickone-wrong-border`	Wrong answer highlight
`--pickone-dropdown-bg`, `--pickone-dropdown-border`, `--pickone-dropdown-shadow`	Dropdown panel (variant="dropdown")

These feed into --exercise-action-bg, --exercise-action-border and --exercise-result-* used by ExerciseLayout.

Content and option buttons inherit --exercise-layout-content-font-size from ExerciseLayout.

Override labels via the labels prop. Supported keys: check, reset (action buttons), results (e.g. "correct" in "3 / 5 correct"), select (dropdown trigger text when no choice selected, e.g. "Select...").

<PickOne
  entries={[...]}
  labels={{
    check: 'Verify',
    reset: 'Try again',
    results: 'correct',
    select: 'Choose...',
  }}
/>

Variants

Buttons (default)

What is the capital of France?

<PickOne
  entries={[
    {
      text: 'What is the capital of France?',
      choices: [
        { value: 'london', label: 'London' },
        { value: 'paris', label: 'Paris' },
        { value: 'berlin', label: 'Berlin' },
      ],
      answer: 'paris',
    },
  ]}
  variant="buttons"
/>

Radio

What is the capital of France?
London
Paris
Berlin

<PickOne
  entries={[
    {
      text: 'What is the capital of France?',
      choices: [
        { value: 'london', label: 'London' },
        { value: 'paris', label: 'Paris' },
        { value: 'berlin', label: 'Berlin' },
      ],
      answer: 'paris',
    },
  ]}
  variant="radio"
/>

What is the capital of France?

<PickOne
  entries={[
    {
      text: 'What is the capital of France?',
      choices: [
        { value: 'london', label: 'London' },
        { value: 'paris', label: 'Paris' },
        { value: 'berlin', label: 'Berlin' },
      ],
      answer: 'paris',
    },
  ]}
  variant="dropdown"
/>