Input

v9.6.2 Edit this page

Inputs enable a user to enter or edit data to influence or change their experience.

Best practices:

  • Always include an input label; remember to use clear and concise language.
  • Use help messaging to further clarify what the input is asking, never use icons for this purpose.
  • Don’t use tooltips with inputs as they’re not accessible – instead consider progressive disclosure and use header and sub-heads to deliver legal or complex messaging.
  • Ensure error messaging adds specific instructions on how to resolve an error.

Usage

Loading examples...

Props

<Input>

Name

Description

Type

Default

defaultValue

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

string

null

error

Show the input in an error visual state.

bool

false

icon

@deprecated prop to show icon on the right side of the input.

node

null

fullWidth

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

bool

false

disabled

Disable interaction and change.

bool

false

type

Type attribute on the <input> element.

string

'text'

className

Class on the <input> element.

string

null

inputRef

Gives access to the input dom node

func

null

label

Label for the input. Components should almost always include a label.

string

null

errorMessage

Optional text to be shown indicating the user is in an error state.

node

null

helpMessage

Optional help text shown below the input.

node

null

tooltip

Optional tooltip shown via an icon next to the label.

node

null

tooltipPlacement

Positioning of tooltip.

one of [[object Object],[object Object],[object Object],[object Object]]

null

dangerouslyForceFocusStyling

Force the component to use its focus styles.

bool

false

dangerouslyForceHoverStyling

Force the component to use its hover styles.

bool

false

Label for <Input>

You should almost always use a label with input:

By supplying a label prop, the InputGroup is used under the hood.

Props

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

Deprecated

The following props are deprecated:

  • icon

Maintainers

This component is maintained by the FEI team.