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.