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 trims whitespace by default and preserves capitalization (important for German nouns).

Blanks grow with the typed text up to 6em (and never wider than the content area). Longer or non-breaking text scrolls inside the field instead of stretching the sentence. See Blank width.

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',
  }}
/>

Blank width

Each blank sizes itself to the typed text so short answers stay compact in the sentence. To keep long or non-breaking strings from stretching the layout, the field stops growing at 6em (--inlinetext-input-max-width), and never exceeds the content width. Extra characters remain in the input and scroll horizontally.

Override the cap in CSS (for example in src/book/custom.css):

.tbx-inlinetext {
  --inlinetext-input-max-width: 12em;
}

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-max-width`	Max visual width of a blank (default `6em`). Longer typed text scrolls inside the field.
`--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.

InlineText

On this page