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)

Live demo

Theme variant selection

Component variant selection

Text input label

Optional helper text

CodeSandbox React Angular Vue Vanilla


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


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

Edit this page on GitHub

Text input: Style

Text input: Accessibility