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.

The TextField component also has some limited support for rendering as other text input types:

• password
• number
• tel
• email
• date
• time
• datetime-local
• month
• week
• url

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.

The "password" type is sort of an exception for this as there is a helper component: Password that allows the user to conditionally show the password in plain text.

The TextArea component is a general wrapper for the <textarea> element with most of the same styles as the TextField. 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 textarea.

If this behavior is undesired, the resize prop can be changed to allow the user to manually resize instead with one of:

• horizontal
• vertical
• both (native behavior)

Note: When the resize prop is set to "horizontal" or "both", the TextArea will be forced to render inline so that it can be resized horizontally.

Since the <input type="number"> behaves oddly, ReactMD exports a hook to deal with number fields named: useNumberField. This uses the useTextField internally to validate the number and return a valid number.

What this hook implements/fixes:

• gets the current number from the text field
  • the number will only be undefined if the defaultValue option is undefined
  • the default will update as the user types, but can be configured to only update once the text field has been blurred with updateOnChange: false
• shows an error if the user types an invalid number since the browser actually allows these sorts of inputs to be typed:
  • --0
  • 0-0
  • 0-0-
  • any of the above but with a + instead of a -
• attempts to update the field on blur by:
  • setting the field value to the stringified number. Examples:
    • 000000 -> 0
    • 001 -> 1
  • fixing the value to be within the min and max values
  • all of the blur behavior can be configured or disabled by the fixOnBlur option

  Check out the examples below to see how this hook works.