React Text Field accepts one child element which is the input element. For ease of integration, we have provided an input component to be used with React Text Field.
NOTE: In order to get access to the value, you must add an onChange handler, which accepts an event and updates the value of the input as shown above.
Props
Prop Name
Type
Description
children
Element
Mandatory. The input element of the text field.
className
String
An optional class added to the .mdc-text-field element.
dense
Boolean
Enables dense variant.
floatingLabelClassName
String
An optional class added to the floating label element of the text field.
fullWidth
Boolean
Enables fullWidth variant.
helperText
Element
Helper text that appears below the text field. Use the <HelperText> component that comes with this package.
isRtl
Boolean
Whether the direction of the text field element is set to RTL.
label
String
Mandatory. Label text that appears as the floating label or placeholder.
leadingIcon
Element
An icon element that appears as the leading icon.
lineRippleClassName
String
An optional class added to the line ripple element.
notchedOutlineClassName
String
An optional class added to the notched outline element.
onLeadingIconSelect
Function
Optional callback fired on interaction with leadingIcon.
onTrailingIconSelect
Function
Optional callback fired on interaction with trailingIcon.
outlined
Boolean
Enables outlined variant.
textarea
Boolean
Enables textarea variant.
trailingIcon
Element
An icon element that appears as the trailing icon.
Input Props
Not all the props below are used for majority of cases. Properties like foundation shouldn't be used when implementing the text field, but is used internally in React Text Field.
Prop Name
Type
Description
inputType
string
HTML tag to be used to render input element. 'input' (default) or 'textarea'.
className
String
Classes to be applied to the input element.
disabled
Function
Disables the input and the parent text field.
foundation
Function
The text field foundation.
handleValueChange
Function
A callback function to update React Text Field's value.
isValid
Boolean
If set, this value will override the native input's validation.
id
String
The <input> id attribute.
onBlur
Function
Blur event handler.
onChange
Function
Change event handler.
onFocus
Function
Focus event handler.
onMouseDown
Function
Mouse down event handler.
onTouchStart
Function
Touch start event handler.
setDisabled
Function
Callback function that is called when the disabled prop updates.
setInputId
Function
Callback function that is called when the id attribute updates.
handleFocusChange
Function
Callback function that is called when focus or blur events occur
value
Number/String
Value of the input.
ref
Function(input: ReactElement) => void
On mount of component, will call passed function with the instance of the <Input />.
NOTE: the <Input> component will receive all properties that a standard <input> accepts.
Accessing the Native Input element
There will be times when you need to access the native . For example if you need to focus the text field, you can add a ref callback method to the <Input /> element and access the <input />. The ref will accept a callback method and on mount and will pass the instance of the input component. Here is an example of how to programatically focus the <input />:
Sass mixins may be available to customize various aspects of the Components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.
The npm package @material/react-text-field receives a total of 4,618 weekly downloads. As such, @material/react-text-field popularity was classified as popular.
We found that @material/react-text-field demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.It has 13 open source maintainers collaborating on the project.
Last updated on 23 Jan 2019
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.
ua-parser-js is set to drop the MIT license and adopt a controversial dual AGPLv3 + PRO licensing model in its upcoming v2.0 release, raising significant concerns among developers and enterprise users.
Researchers recently demonstrated that the npm Registry is vulnerable to cache poisoning combined with DoS, posing significant risks for package availability.