Text input – Carbon Design System

Preview the text input component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

React

Angular (Community)

Vue (Community)

Web Components (Community)

Live demo

Theme selector

Variant selector

CodeSandbox React Angular Vue Vanilla Web Components

Live editor for the Text input component


    <div>
      <TextInput
        helperText="Optional helper text"
        id="test2"
        invalidText="A valid value is required"
        labelText="Text input label"
        placeholder="Placeholder text"
      />
    </div>


    <div>
      <TextInput
        helperText="Optional helper text"
        id="test2"
        invalidText="A valid value is required"
        labelText="Text input label"
        placeholder="Placeholder text"
      />
    </div>

Edit this page on GitHub

Text input: Style

Text input: Accessibility