TextInput

Text inputs allow users to enter any combination of letters, numbers, or symbols in a single-line input box.

Design guidance

When and how to use this

Use a TextInput when the user needs to be able to enter relatively short free-form input in the form of letters, numbers, and symbols. These inputs are ideal for cases where users might be pasting in short snippets of text from their clipboard.

When to consider something else

For cases where a user needs to enter or paste longer input, a Textarea may be a better choice. If it's likely that multiple users filling out the same input would enter similar things, or if your use case requires more structured user input, you might consider a Select with predetermined options instead of a TextInput.

Figma

Drag in a Text Input Field from the Compositions section in the Form Controls v2 library in your Assets pane. We provide default and error states as well as a required attribute for the field. A Text Input component is nested within, which provides 3 size variants. Default has a 48px height, and should cover nearly all use cases. We do also offer Small (32px) andTiny (24px), but these should be reserved for especially compact UI designs. Options for displaying an icon in the input, and all states (Idle, Focus, Disabled, and so on) are also available. You can also drag in a Text Input on its own from the Components section, but we recommend using the Field composition in most cases.

React

TextInput composes Chakra's Input. We offer the same size variants as in Figma (above). We also include the ability to include an icon either before or after text entry. We recommend wrapping your TextInput in a Field as noted below.

<Stack direction="column" spacing="400">
  <TextInput placeholder="I'm idle" />
  <TextInput placeholder="I'm invalid" isInvalid />
  <TextInput placeholder="I'm disabled" isDisabled />
  <TextInput placeholder="I have iconBefore set" iconBefore={iconUser} />
  <TextInput
    placeholder="I have elementBefore set"
    elementBefore={<IconButton icon={iconSearch} onClick={() => alert('👋🏻')} />}
  />
</Stack>

Field

Wrap your TextInput in a Field to provide a label and, if an error prop is present on the Field, display an error message. If you use error your TextInput will be in the isInvalid state.

<Stack direction="column">
  <Field label="I'm a label">
    <TextInput placeholder="I'm wrapped in a Field" />
  </Field>
  <Field label="I'm a label" error="I'm an error message">
    <TextInput defaultValue="I caused an error" />
  </Field>
</Stack>

Size

We offer 3 size variants for TextInput. The default size should be used for most cases, but small and tiny are available for compact interfaces.

<Stack direction="column" spacing="400">
  <TextInput size="tiny" placeholder="Tiny" />
  <TextInput size="small" placeholder="Small" />
  <TextInput size="default" placeholder="Default" />
</Stack>

Bootstrap

Bootstrap provides styles for input type=”text” and label elements, using the .form-control and .form-label classes. We match Figma and React size variants via .form-control-sm and .form-control-tiny. Using Bootstrap's .form-control-lg maps to our default (48px height) variant.

<div>
  <label for="exampleTextInput" class="form-label">I'm a label</label>
  <input
    type="text"
    class="form-control"
    id="exampleTextInput"
    placeholder="I'm a Bootstrap text input"
  />
</div>

Invalid

Add the .invalid class to call out a TextInput with invalid input.

<div>
  <label for="exampleTextInput" class="form-label">I'm a label</label>
  <input
    type="text"
    class="form-control invalid"
    id="exampleTextInput"
    placeholder="I'm an invalid Bootstrap text input"
  />
</div>

Icons

In addition to Bootstrap's input group functionality, we also support including an icon either before or after the text entry (just like iconBefore and iconAfter in React).

Include the icon markup within the .input-group and add the corresponding icon class (either .icon-before or .icon-after).

<div class="vstack gap-300">
  <div class="input-icon-group icon-before">
    <input
      type="text"
      class="form-control"
      placeholder="Username"
      aria-label="Username"
    />
    <svg class="icon" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="/icons/all.svg#i-user" />
    </svg>
  </div>

  <div class="input-icon-group icon-before">
    <input
      type="text"
      class="form-control form-control-sm"
      placeholder="Username"
      aria-label="Username"
    />
    <svg class="icon" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="/icons/all.svg#i-user" />
    </svg>
  </div>

  <hr class="text-neutral-200 my-100" />

  <div class="input-icon-group icon-after">
    <input
      type="text"
      class="form-control"
      placeholder="Tags"
      aria-label="Username"
    />
    <svg class="icon" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="/icons/all.svg#i-chevron-down" />
    </svg>
  </div>
</div>

Input Groups

We support the most basic implementation of Bootstrap's Input Group component. Wrap the 2 items you want to group in a container with the .input-group class. You can place a span with the class .input-group-text before or after the input to achieve the results shown.

As with basic inputs, we support size variants using the .input-group-sm and .input-group-tiny classes that mirror the .form-control-* sizing classes shown above.

<div class="vstack gap-300">
  <div class="input-group">
    <span class="input-group-text" id="addon-before">@</span>
    <input
      type="text"
      class="form-control"
      placeholder="Username"
      aria-label="Username"
      aria-describedby="addon-before"
    />
  </div>

  <div class="input-group">
    <input
      type="text"
      class="form-control"
      placeholder="Domain"
      aria-label="Domain"
      aria-describedby="addon-after"
    />
    <span class="input-group-text" id="addon-after">.com</span>
  </div>
</div>

React Native

TextInput is a styled input component for React Native that provides consistent styling and behavior across platforms. It's the base component used by both Field and InputField.

Usage

import { TextInput } from '@hoverinc/design-system-react-native';

const App = () => (
  <TextInput
    placeholder="Enter your text..."
    value={text}
    onChangeText={setText}
  />
);

Error Message

import { TextInput } from '@hoverinc/design-system-react-native';

const App = () => (
  <TextInput
    placeholder="Enter your email"
    isInvalid
    errorMessage="Please enter a valid email"
  />
);

Props

Font Scaling