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