PickMulti

PickMulti lets users select multiple correct options per question. Each row has a question and a list of checkboxes. Multiple choices can be correct.

Import

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

Example

Select all programming languages:
JavaScriptPythonHTMLRust

<PickMulti
  entries={[
    {
      text: 'Select all programming languages:',
      choices: [
        { label: 'JavaScript', correct: true },
        { label: 'Python', correct: true },
        { label: 'HTML', correct: false },
        { label: 'Rust', correct: true },
      ],
    },
  ]}
/>

Props

Prop

Type

Labels

Override labels via the labels prop. Supported keys: check, reset (action buttons), results (e.g. "correct" in "3 / 5 correct").

<PickMulti
  entries={[...]}
  labels={{
    check: 'Verify',
    reset: 'Reset',
    results: 'correct',
  }}
/>

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
`choices`	Checkbox list container
`choice`	Each choice label
`checkbox`	Checkbox input
`checkButton`	Check button
`resetButton`	Reset button
`result`	Results text

CSS Variables

Scoped under .tbx-pickmulti:

Variable	Purpose
`--pickmulti-option-bg`	Choice background (default)
`--pickmulti-option-bg-selected`	Choice background when selected (before validation). Uses `color-mix` with `--exercise-accent-color`.
`--pickmulti-option-border-selected`	Choice border when selected (before validation). Uses `--exercise-accent-color`.
`--pickmulti-item-border`	Row divider
`--pickmulti-action-bg`, `--pickmulti-action-border`	Check/Reset button background and border
`--pickmulti-result-neutral`, `--pickmulti-result-correct`, `--pickmulti-result-wrong`	Results text colors (neutral, correct, wrong)
`--pickmulti-correct-bg`, `--pickmulti-correct-border`	Correct answer highlight
`--pickmulti-wrong-bg`, `--pickmulti-wrong-border`	Wrong answer highlight

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

Content inherits --exercise-layout-content-font-size. Checkbox size is 1.25rem with accent-color: var(--exercise-accent-color).