Input

Open in Playground

Unlabeled text input; use Field when you need a label and error text. onChange receives the value string, and invalid sets the error style.

startAdornment and endAdornment put an icon or a button inside the field and pad the text to clear them. The start adornment is decorative (clicks go through to the input); the end one can be interactive, for example a clear button.

Props

valuestring
Current value.
onChange(value: string) => void
Called with the new value.
invalidboolean
Default: false
Error style and aria-invalid.
typestring
Default: 'text'
Native input type.
clearableboolean
Default: false
Shows a clear button while there is a value; Escape clears too. Focus returns to the input.
clearLabelstring
Default: 'Clear'
Accessible name of the clear button.
classNamestring
Default: ''
Extra classes for the root element.
...rest
Any other props are passed to the underlying element.

Input props
Prop	Type	Default	Description
`value`	string	–	Current value.
`onChange`	(value: string) => void	–	Called with the new value.
`invalid`	boolean	`false`	Error style and aria-invalid.
`type`	string	`'text'`	Native input type.
`clearable`	boolean	`false`	Shows a clear button while there is a value; Escape clears too. Focus returns to the input.
`clearLabel`	string	`'Clear'`	Accessible name of the clear button.
`className`	string	`''`	Extra classes for the root element.
`...rest`		–	Any other props are passed to the underlying element.