InputText

Usage

import { InputText } from '@acronis-platform/ui-react';

InputText composes the bare InputBox primitive and adds the full field furniture — an optional label (with a required marker), helper description, error message, and an optional clear button. Without a label it renders just the box. Themed by the --ui-input-text-* tokens; the clear button reuses the ghost --ui-button-icon-* tokens for its glyph and its hover/active background. className targets the field as a whole (label, box, and message together), so it sizes correctly in a flex/grid ancestor.

Naming. The Input export of @acronis-platform/ui-react is an alias of InputText (and InputProps of InputTextProps), so importing Input gives you this labelled field — not a bare control. For that, import InputBox by name.

Examples

A labeled field with helper text:

<InputText label="Full name" description="As it appears on your ID." />

Required and error states. required appends a * to the label and sets aria-required; error switches the box to its error border (via aria-invalid) and replaces description with the error message:

<InputText label="Email" required placeholder="you@example.com" />

<InputText
  label="Email"
  error="Enter a valid email address."
  placeholder="you@example.com"
/>

A clearable, controlled field. The clear button only renders while clearable is set, the controlled value is non-empty, and the field isn't disabled — an uncontrolled field (defaultValue) never shows it:

const [value, setValue] = React.useState('');

<InputText
  label="Search term"
  clearable
  value={value}
  onChange={(e) => setValue(e.target.value)}
  onClear={() => setValue('')}
/>

API Reference