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.
| Prop | Description |
|---|---|
size | Sets the size of the TextInput. Use small or tiny only for especially compact interfaces. |
placeholder | Sets placeholder text for the TextInput. |
iconBefore and iconAfter | Allows you to prepend or append an Icon component |
elementBefore and elementAfter | Allows you to prepend or append a custom component |
isDisabled | If true the TextInput will be disabled. |
isInvalid | If true the TextInput will be invalid and its aria-invalid will be set to true |
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.
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.
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.
| Class | Description |
|---|---|
.form-control and .form-label | Invokes Bootstrap theme styles for text inputs and labels. |
.form-control-sm and form-control-tiny | Reproduces the small (32px height, default 16/24 text) and tiny (24px height, 14/20 text) size variants found in Figma and React |
Invalid
Add the .invalid class to call out a TextInput with invalid input.
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).
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.