QuestionBoolean

Yes / No toggle pair implemented as an accessible radiogroup with configurable labels, size variants, and roving tabindex

QuestionBoolean renders two buttons (Yes and No) as a role="radiogroup". It is the lightest-weight question type — no options array needed, just a label.

Import

import { QuestionBoolean } from '@tour-kit/surveys';

Usage

<QuestionBoolean
  id="found-what-needed"
  label="Did you find what you were looking for?"
  yesLabel="Yes"
  noLabel="No"
  onChange={(value) => {
    survey.answer('found-what-needed', value);
    survey.complete();
  }}
/>

Custom labels

<QuestionBoolean
  id="would-recommend"
  label="Would you recommend us to a colleague?"
  yesLabel="Definitely"
  noLabel="Not really"
  onChange={(value) => survey.answer('would-recommend', value)}
/>

Controlled

const [answer, setAnswer] = useState<boolean | null>(null);

<QuestionBoolean
  id="helpful"
  label="Was this helpful?"
  value={answer}
  onChange={setAnswer}
/>

Props

Prop

Type

Variants

QuestionBoolean uses booleanOptionVariants from CVA:

Variant	Values	Default
`size`	`'sm'` `'md'` `'lg'`	`'md'`
`selected`	`true` `false`	`false`

Size maps to button height: sm → h-8, md → h-10, lg → h-12.

Accessibility

Container: role="radiogroup", aria-label={label}, aria-required
Options: role="radio", aria-checked, aria-label set to yesLabel / noLabel
Roving tabindex: only one button has tabIndex={0} at a time
Arrow keys navigate between Yes and No; Space/Enter select

QuestionBoolean

On this page