TextInput
TextInput
component allows users to input strings.Basic usage
defaultValue
prop to set the initial value, and access this from value
on the
component state.tsxCopied1<TextInput id="textInput" label="Input your name" defaultValue="John Smith" />2<Text>Your name is {textInputState.value}</Text>
Focusing
focus
function from the
component state.tsxCopied1<Button onClick={() => textInputState.focus()}>Focus on input</Button>2<TextInput id="textInput" label="Input your name" defaultValue="John Smith" />3<Text>Your name is {textInputState.value}</Text>
Disabling
defaultDisabled
prop on the TextInput
component,
or by calling setDisabled
from the component state.tsxCopied1<Button onClick={() => textInputState.setDisabled(!textInputState.disabled)}>2Toggle disabled3</Button>4<TextInput id="textInput" label="Input your name" defaultValue="John Smith" defaultDisabled />5<Text>Your name is {textInputState.value}</Text>
Component API
The input's disabled state on initial render.
The input value on initial render.
Description displayed below the input.
Disables the input. Prefer to use defaultDisabled and component state.
Error text displayed below the input.
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
Adds an icon to the left of the input.
The ID referenced by the global component state.
Label displayed above the input.
Callback when input changes when using as a controlled component. Prefer using the global component state.
Hint text displayed when the input is empty.
The input's border radius.
Adds red asterisk on the right side of label and sets required on input element
Input size.
Type of text input. Set to password
to hide the inputted text while typing.
A single function or an array of functions that validate the input value.
The value of the input when using as a controlled component. Prefer using defaultValue and the global component state.
Input appearance.
State API
Whether the text input is disabled
Sets the disabled value of the text input. If the disabled
value is not provided, the text input will be disabled
Sets the value of the text input
The string currently in the text input