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.
Last modified 2mo ago
Copy link
On this page
Usage
Demonstration
Props