Text fields are a wrapper for the
<input type="text" /> with some general
themes and styles applied. There are four different themes available by default:
"unstyled"- removes all the default borders, background colors, etc.
"underline"- adds an underline to the text field that animates in when the input gains focus as well as including a floating label
"filled"- an extension of the
"underline"theme that also adds a background color to it
"outline"- adds a outline to the text field and animates a floating label with it.
TextField component also has some limited support for rendering as other
text input types:
When you set the
type prop to one of these values, no additional functionality
or validation will be built in. The only support out of the box is to be styled
correctly with some of the different types.
"password" type is sort of an exception for this as there is a helper
Password that allows the user to conditionally show the password in
TextArea component is a general wrapper for the
<textarea> element with
most of the same styles as the
TextArea will default to have
a minimal starting height and animates as the user types. This behavior can be
updated so that the transition for height changes is disabled and happens
immediately. The default behavior is to allow the textarea to infinitely grow,
but specific limits can be set by using the
maxRows prop. The textarea will
grow until the row limit and then allow native scrolling behavior within the
If this behavior is undesired, the
resize prop can be changed to allow the
user to manually resize instead with one of:
Note: When the
resizeprop is set to
TextAreawill be forced to render inline so that it can be resized horizontally.
<input type="number"> behaves oddly, ReactMD exports a hook to deal
with number fields named:
useNumberField. This uses the
internally to validate the number and return a valid number.
What this hook implements/fixes:
gets the current number from the text field
shows an error if the user types an invalid number since the browser actually allows these sorts of inputs to be typed:
+instead of a
attempts to update the field on blur by:
valueto be within the
Check out the examples below to see how this hook works.