TextInput
A basic text input component that can be used in single or multi-line modes.
function App() {
const [value, setValue] = useState('')
return (
<TextInput
value={value}
onChange={event => {
setValue(event.target.value)
}}
/>
)
}

TYPE | DEFAULT VALUE |
---|---|
React node | null |
Allows to add an icon or any other component inside of a
TextInput
.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.TYPE | DEFAULT VALUE |
---|---|
Number | 36 |
The total width of the adornment.
TYPE | DEFAULT VALUE |
---|---|
Number | 4 |
The horizontal padding of the adornment.
TYPE | DEFAULT VALUE |
---|---|
Boolean | false |
Focus the text field when the component gets mounted.
TYPE | DEFAULT VALUE |
---|---|
Function | None |
The native
change
event. Gets passed to either the input
element, or textarea
element if multiline
is true.TYPE | DEFAULT VALUE |
---|---|
String | "text" |
This prop is ignored if
multiline
is true
.- Type:
Boolean
- Default:
false
Set to true to use multiple lines. Internally uses a
textarea
HTML element.- Type:
Boolean
- Default:
false
Set to true to obtain an input that expands horizontally.
Last modified 6mo ago