Text Input

Text inputs allow users to enter free-form text data such as filling in contact or payment information.

Anatomy

Label: Indicates the purpose of the text input field. It should clearly communicate what kind of information is expected.
Description: Provides additional context/instructions about the text input field. It helps users understand what is required or gives examples of the kind of information they should enter.
Optional indicator: Indicates fields that are not mandatory.
Input box: the interactive area where users can type their input
Input text: The text string entered by the user. This is not placeholder text and only applies when the user has typed.
Feedback message: provides users with response regarding their input. For now it’s only errors. The feedback message should be clear and specific, guiding the user on any necessary actions

Usage Guidelines

Width

As layouts adapt to larger screens, flexible container dimensions are applied to form components for better readability. The default width is 4 grid columns—343px on mobile, expanding to 422px on desktop for an optimized experience.

Show code

JSX
HTML

<Form>
  <TextInput label="Full name" attributes={{ defaultValue: "John Smith" }} />
</Form>;

<form class="o3-form">
  <div class="o3-form-field">
    <label
      class="o3-form-field__label"
      for="o3-form-text-input-_050771018398320544"
    >
      Full name
    </label>
    <input
      id="o3-form-text-input-_050771018398320544"
      class="o3-form o3-form-text-input"
      required=""
      aria-required="true"
      type="text"
      value="John Smith"
    />
  </div>
</form>

Open in StoryBook

In most cases, the input field follows the standard forms width, which adapts to the layout. However, when the expected user input is a short string of characters, it’s better to use a properly-sized input field:

Show code

JSX
HTML

<Form>
  <TextInput label="2 characters" length={2} />
  <TextInput label="3 characters" length={3} />
  <TextInput label="4 characters" length={4} />
</Form>;

<form class="o3-form">
  <div class="o3-form-field">
    <label
      class="o3-form-field__label"
      for="o3-form-text-input-_49393112966746666"
    >
      2 characters
    </label>
    <input
      id="o3-form-text-input-_49393112966746666"
      class="o3-form o3-form-text-input o3-form-text-input--short-2"
      required=""
      aria-required="true"
      maxlength="2"
      type="text"
    />
  </div>
  <div class="o3-form-field">
    <label
      class="o3-form-field__label"
      for="o3-form-text-input-_23252426058623898"
    >
      3 characters
    </label>
    <input
      id="o3-form-text-input-_23252426058623898"
      class="o3-form o3-form-text-input o3-form-text-input--short-3"
      required=""
      aria-required="true"
      maxlength="3"
      type="text"
    />
  </div>
  <div class="o3-form-field">
    <label
      class="o3-form-field__label"
      for="o3-form-text-input-_32868147725942376"
    >
      4 characters
    </label>
    <input
      id="o3-form-text-input-_32868147725942376"
      class="o3-form o3-form-text-input o3-form-text-input--short-4"
      required=""
      aria-required="true"
      maxlength="4"
      type="text"
    />
  </div>
</form>

Open in StoryBook

Placeholder Text

The input box should never be used to display a text hint for the user.

✅ Use description fields for additional hints

❌ Never use the input box for hints

Using placeholder text is considered a bad practice because the hint disappears once the user starts typing, with no obvious way to retrieve it and forces the user to have to rely on memory.