Input

v9.2.7Edit this page

A text field is an input field that a user can type into. This component is a stateless wrapper around <input>, providing visual styling.

Usage

Loading...

Loading examples...

Props

<Input>

Name

Description

Type

Default

defaultValue

A string that will render inside the input field as the default value.

string

error

Show the input in an error visual state.

bool

icon

Optional icon to show on the right side of the input.

node

fullWidth

When true, sets width to 100% on the input.

bool

disabled

Disable interaction and change.

bool

type

Type attribute on the <input> element.

string

'text'

className

Class on the <input> element.

string

inputRef

Gives access to the input dom node

func

Best Practices

In general

  • Use sentence case, not title case for all copy. That is, only capitalize the first letter — “Annual income” and not “Annual Income”.

Label

  • The "what" - this is the functional text that clearly describes the info we’re asking the user to provide.
  • Always supply a label unless you have a very specific use case not to.
  • Use the noun only — don’t describe as a full sentence or question (i.e. “What’s your annual income?”) Instead, use the H1 text for branded, human-speak copy.
  • Label should not be placeholder text and should not disappear when user selects into text field.
  • Should be about the same size as the expected input (eg. city of residence averages at no more than 22 characters in length).

Tooltip

  • The tooltip is used for additional clarity to the label. The majority of users shouldn’t need it read it to in order to fill out the input.

Placeholder text

  • The “how” - placeholder text suggests how the user should provide and format the info we need — such as a dollar amount for income, or a percentage for their mortgage APR.
  • Preceding with “e.g.” suggests that it’s an example and not a pre-filled value. Do not use placeholder text as pre-filled value.
  • For dropdowns, use “Pick one” as placeholder text to suggest what the user should do. Do not pre-select a value if the user has not provided this information before.
  • Specific inputs:
    • Annual income placeholder text should always be “e.g. $50,000”.
    • Household income placeholder text should always be “e.g. $100,000”.
    • Credit score dropdown should default to “Pick one”.

Error text

  • Error text indicates a problem with the user’s input value).
  • If all fields are required, disable the submission CTA vs. handling the error at an input level.
  • Do not validate field until user is finished interacting with it.

Helper text

  • Use this to link out to other resources for additional context.
  • That said, use sparingly and only to “help” the current task at hand. For example — if a user doesn’t know what his credit score is, present the option to get their credit score via TransUnion.

Label for <Input>

You usually want a label for the input. Use InputGroup to attach a label to Input.

Props

In addition to the props defined by this component, any props <input> takes, such as name, value, onChange, etc., are accepted.

Legacy Helpers

There are a few helpers for upgrading from v8 to v9. See the changelog for more information about upgrading.

<LegacyInput>

This component (imported from dist/legacy.jsx) provides the same interface as v8 and is intended to be used as a helper when upgrading from v8 to v9. This helper primarily wraps the v8 <FormattedInput> with an <InputGroup> and maps the validation prop to help and error props. It's preferred that this helper is not used and <Input> and <InputGroup> are used separately to achieve the same affect.

getErrorFromValidation(validation)

Maps an old validation object to a boolean for the new error prop.

getHelpFromValidation(validation)

Maps an old validation object to a boolean for the new error prop.

Maintainers

This component is maintained by the FEI team.

See Also