TextInput

Search…

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.

Slider

SearchInput

Last modified 2mo ago

Copy link

On this page

Usage

Demonstration

Props

Usage

Demonstration

Props

`adornment`

`adornmentPosition`

`adornmentSettings.width`

`adornmentSettings.padding`

`autofocus`

`onChange`

`type`

`multiline`

`wide`