TextInput

A basic text input component that can be used in single or multi-line modes.

Usage

function App() {
  const [value, setValue] = useState('')
  return (
    <TextInput
      value={value}
      onChange={event => {
        setValue(event.target.value)
      }}
    />
  )
}

Demonstration

Props

adornment

TYPE
DEFAULT VALUE

React node

null

Allows to add an icon or any other component inside of a TextInput.

adornmentPosition

TYPE
DEFAULT VALUE

"start" or "end"

"start"

Set this to change the position of the adornment. 'start' is displayed on the left, and 'end' on the right. Note: in the future, the position will be reversed in right-to-left languages.

adornmentSettings.width

TYPE
DEFAULT VALUE

Number

36

The total width of the adornment.

adornmentSettings.padding

TYPE
DEFAULT VALUE

Number

4

The horizontal padding of the adornment.

autofocus

TYPE
DEFAULT VALUE

Boolean

false

Focus the text field when the component gets mounted.

onChange

TYPE
DEFAULT VALUE

Function

None

The native change event. Gets passed to either the input element, or textarea element if multiline is true.

type

TYPE
DEFAULT VALUE

String

"text"

Any valid <input> type. See MDN.

This prop is ignored if multiline is true.

multiline

  • Type: Boolean

  • Default: false

Set to true to use multiple lines. Internally uses a textarea HTML element.

wide

  • Type: Boolean

  • Default: false

Set to true to obtain an input that expands horizontally.

Last updated

Was this helpful?