HeadlessQuestionText

Headless text input — manages value, character count, and returns pre-built inputProps and characterCountProps via render prop

HeadlessQuestionText manages value state and character counting, and returns prop objects ready to spread onto your <input> or <textarea> and character count element.

Import

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

Usage

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

<HeadlessQuestionText
  id="feedback"
  label="What could we do better?"
  maxLength={300}
  showCharacterCount
  onChange={(value) => survey.answer('feedback', value)}
>
  {({ value, characterCount, isAtLimit, inputProps, characterCountProps }) => (
    <div className="flex flex-col gap-1">
      <textarea
        {...inputProps}
        rows={4}
        className={`border rounded p-2 resize-y ${isAtLimit ? 'border-red-500' : 'border-gray-300'}`}
      />
      <span
        {...characterCountProps}
        className={`text-xs text-right ${isAtLimit ? 'text-red-500' : 'text-gray-500'}`}
      >
        {characterCount} / 300
      </span>
    </div>
  )}
</HeadlessQuestionText>

Props

Prop

Type

Render prop shape