InlineChoices
Fill-in-the-blank exercises with dropdown selects
InlineChoices is like InlineText but uses dropdown selects instead of free text. Each blank shows a trigger that opens a list of choices. Multiple options can be valid (e.g. "isn't" and "is not").
Import
import { InlineChoices } from '@bside-tech/tbx-ui/components';Example
<InlineChoices
entries={[
{
text: 'React {0} a JavaScript library. Hooks {1} in React 16.8.',
choices: [['is', 'are', 'was'], ['were introduced', 'are introduced', 'introduced']],
answers: [['is', 'was'], ['were introduced']],
},
]}
/>Props
Prop
Type
Labels
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 blank, default "Select…").
<InlineChoices
entries={[...]}
labels={{
check: 'Verify',
reset: 'Reset',
results: 'correct',
select: 'Choose…',
}}
/>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 |
content | Text paragraph(s) |
trigger | Dropdown trigger button |
dropdown | Dropdown panel |
option | Dropdown option |
checkButton | Check button |
resetButton | Reset button |
result | Results text |
CSS Variables
Scoped under .tbx-inlinechoices:
| Variable | Purpose |
|---|---|
--inlinechoices-trigger-bg, --inlinechoices-trigger-bg-selected | Trigger background |
--inlinechoices-trigger-border, --inlinechoices-trigger-border-selected | Trigger border |
--inlinechoices-action-bg, --inlinechoices-action-border | Check/Reset button background and border |
--inlinechoices-result-neutral, --inlinechoices-result-correct, --inlinechoices-result-wrong | Results text colors (neutral, correct, wrong) |
--inlinechoices-dropdown-bg, --inlinechoices-dropdown-border, --inlinechoices-dropdown-shadow | Dropdown panel |
--inlinechoices-option-hover | Option hover state |
--inlinechoices-correct-bg, --inlinechoices-correct-border | Correct answer highlight |
--inlinechoices-wrong-bg, --inlinechoices-wrong-border | Wrong answer highlight |
These feed into --exercise-action-bg, --exercise-action-border and --exercise-result-* used by ExerciseLayout. Content and triggers use --exercise-layout-content-font-size.
Content and triggers use --exercise-layout-content-font-size. Selected trigger state uses --exercise-accent-color for background (color-mix) and border.