InlineText

InlineText renders text with blanks ({0}, {1}, …) that users fill in by typing. Multiple valid answers per blank are supported (e.g. "isn't" and "is not"). Comparison is normalized (trim + lowercase by default).

Import

import { InlineText } from '@bside-tech/tbx-ui/components';

Example

The cat on the mat. It sleeping.

<InlineText
  entries={[
    {
      text: 'The cat {0} on the mat. It {1} sleeping.',
      answers: [['is', 'was'], ['is', "isn't", 'is not']],
    },
  ]}
/>

Props

Prop

Type

Labels

Override labels via the labels prop. Supported keys: check, reset (action buttons), results (e.g. "correct" in "3 / 5 correct").

<InlineText
  entries={[...]}
  labels={{
    check: 'Verify',
    reset: 'Reset',
    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
`content`	Text paragraph(s)
`input`	Blank input fields
`checkButton`	Check button
`resetButton`	Reset button
`result`	Results text

CSS Variables

Scoped under .tbx-inlinetext:

Variable	Purpose
`--inlinetext-input-bg`, `--inlinetext-input-text`	Input background and text
`--inlinetext-input-border`	Input border (default)
`--inlinetext-input-border-empty`	Input underline when empty (before validation). Uses `--exercise-accent-color`.
`--inlinetext-input-border-focus`	Input border on focus
`--inlinetext-action-bg`, `--inlinetext-action-border`	Check/Reset button background and border
`--inlinetext-result-neutral`, `--inlinetext-result-correct`, `--inlinetext-result-wrong`	Results text colors (neutral, correct, wrong)
`--inlinetext-correct-bg`, `--inlinetext-correct-border`	Correct answer highlight
`--inlinetext-wrong-bg`, `--inlinetext-wrong-border`	Wrong answer highlight

These feed into --exercise-action-bg, --exercise-action-border and --exercise-result-* used by ExerciseLayout.

Content and inputs use --exercise-layout-content-font-size. Input text uses --exercise-accent-color before validation.