Avala Design
← Components/primitives

TextInput

Carbon-spec text input with built-in label, helper text, and validation states (error / warning / success / read-only / disabled).

primitivesstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { TextInput, TextInputState } from "@avala/design";

<TextInput size="md" state="default">
  <TextInputState />
</TextInput>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-textinput--defaultOpen in Storybook →

When to use

  • Any single-line text field in a form. The default text-entry primitive.
  • Use the state prop to wire validation feedback (error / warning / success).

When not to use