ExercisesCatalogue
YesNo
True/False or Yes/No questions
YesNo presents a list of statements with Yes/No (or custom labels) buttons. Ideal for fact-checking and true/false exercises.
Import
import { YesNo } from '@bside-tech/tbx-ui/components';Example
Answer all questions below using a simple Yes or No.
Select true or false for each statement.
- The Earth is flat.
- Water boils at 100°C at sea level.
- JavaScript and Java are the same language.
<YesNo
entries={[
{ text: "The Earth is flat.", answer: false },
{ text: "Water boils at 100°C at sea level.", answer: true },
{ text: "JavaScript and Java are the same language.", answer: false },
]}
/>Props
Prop
Type
Labels
Override labels via the labels prop. Supported keys: true, false (Yes/No buttons), check, reset (action buttons), results (e.g. "correct" in "3 / 5 correct"). Default for buttons: { true: "Yes", false: "No" }.
<YesNo
entries={[
{ text: "The sky is blue.", answer: true },
{ text: "2 + 2 = 5.", answer: false },
]}
labels={{
true: "Agree",
false: "Disagree",
check: "Verify",
reset: "Retry",
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 | Statement text |
buttons | Yes/No button group |
button | Each option button |
checkButton | Check button |
resetButton | Reset button |
result | Results text |
CSS Variables
Scoped under .tbx-yesno:
| Variable | Purpose |
|---|---|
--yesno-icon-color | Icon color (inherits --exercise-layout-icon-color) |
--yesno-option-bg | Option button background (default) |
--yesno-option-bg-selected | Option button background when selected (before validation). Uses color-mix with --exercise-accent-color. |
--yesno-option-border-selected | Option button border when selected (before validation). Uses --exercise-accent-color. |
--yesno-item-border | Row divider |
--yesno-action-bg, --yesno-action-border | Check/Reset button background and border |
--yesno-result-neutral, --yesno-result-correct, --yesno-result-wrong | Results text colors (neutral, correct, wrong) |
--yesno-correct-bg, --yesno-correct-border | Correct answer highlight |
--yesno-wrong-bg, --yesno-wrong-border | Wrong answer highlight |
These feed into --exercise-action-bg, --exercise-action-border and --exercise-result-* used by ExerciseLayout.