HeadlessQuestionBoolean

Headless yes/no toggle — manages boolean state and returns groupProps and getOptionProps for accessible yes/no buttons

HeadlessQuestionBoolean manages a boolean | null value and returns ARIA props for a two-option radiogroup. Use it when you need custom styling on the yes/no buttons.

Import

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

Usage

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

<HeadlessQuestionBoolean
  id="helpful"
  label="Was this article helpful?"
  yesLabel="Yes, it helped"
  noLabel="No, I need more help"
  onChange={(value) => {
    survey.answer('helpful', value);
    survey.complete();
  }}
>
  {({ value, groupProps, getOptionProps, setValue }) => (
    <div {...groupProps} className="flex gap-3">
      {[true, false].map((boolVal) => {
        const optProps = getOptionProps(boolVal);
        return (
          <button
            key={String(boolVal)}
            type="button"
            {...optProps}
            onClick={() => setValue(boolVal)}
            className={`px-6 py-2 rounded border font-medium ${
              optProps['aria-checked']
                ? 'bg-blue-600 text-white border-blue-600'
                : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
            }`}
          >
            {optProps['aria-label']}
          </button>
        );
      })}
    </div>
  )}
</HeadlessQuestionBoolean>

Props

Prop

Type

Render prop shape