TextField


Examples


margin
maxWidth
Learn More
align
string
left, center, right
The text alignment of the input
id
string
Required
The ID for the form input
multiline
bool
Renders a multiline textarea
type
string
default: text
text, email, number, password, search, tel, url, date
The type of the input
placeholder
string
Placeholder text for the input
autofocus
bool
Whether the input will be automatically focused on initial render or not
disabled
bool
Whether the input is disabled or not
readOnly
bool
Whether the value of the input is able to be changed or not
required
bool
Whether the input is required or not
resize
string
none, both, horizontal, vertical, block, inline
A value to determine how a multiline input can be resized
label
string
Label for the TextField
labelHidden
bool
Hides the label visually, but still accessible to screen readers
helpText
string
Additional text to help the user that renders below the input
connectLeft
node
Content rendered inline to the left of the input
connectRight
node
Content rendered inline to the right of the input
prefix
node
Content rendered before the input value (i.e. currency, icons, etc.)
suffix
node
Content rendered after the input value (i.e. icons)
error
string
Renders an error message below the input
errorInLabel
bool
Optionally renders the error message to the right of the input's label
onChange
function
default: (e) => void
Callback when input value state changes
onFocus
function
default: (e) => void
Callback when input is focused
onBlur
function
default: (e) => void
Callback when input loses focus