QuestionText

Single-line input or resizable textarea with optional character count, size variants, and autofocus support

QuestionText renders either an <input type="text"> or a resizable <textarea> controlled by the mode prop. Character count is announced via aria-live="polite" when enabled.

Import

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

Usage

Single-line input

<QuestionText
  id="email"
  label="What email should we use to follow up?"
  placeholder="[email protected]"
  isRequired
  onChange={(value) => survey.answer('email', value)}
/>

Multi-line textarea with character count

<QuestionText
  id="feedback"
  label="Tell us more"
  mode="textarea"
  rows={4}
  maxLength={500}
  showCharacterCount
  placeholder="Share your thoughts..."
  onChange={(value) => survey.answer('feedback', value)}
/>

Controlled value

const [text, setText] = useState('');

<QuestionText
  id="feedback"
  label="Your feedback"
  value={text}
  onChange={setText}
/>

Variants

QuestionText uses textInputVariants from CVA:

Variant	Values	Default
`size`	`'sm'` `'md'` `'lg'`	`'md'`

Size maps to height: sm → h-8, md → h-10, lg → h-12. Textarea mode adds h-auto py-2 resize-y overrides.

When showCharacterCount is true, a <span aria-live="polite"> below the input announces the count. When the limit is reached, the span switches to text-destructive colour. The span id is linked to the input via aria-describedby.