MaterialR TextField

@materialr/textfield

Material textfield implementation for React

Installation

$ npm install --save @materialr/textfield

Demo

A full demo is available on the MaterialR website showcasing all variants.

Components

Default export

import TextField from '@materialr/textfield';

Props

Prop	Type	Required	Default	Description
box	bool	No	false	Whether to render a box outline
className	string	No	undefined	Additional classNames to add
defaultValue	string	No	undefined	The default input value (uncontrolled element)
disabled	bool	No	false	Whether the input is disabled
fullWidth	bool	No	false	Whether the input is the full width of it's parent
helperText	string	No	undefined	The helper text to render beneath the field
helperTextPersistent	bool	No	false	Whether the helper text is always visible
helperTextValidationMessage	bool	No	false	Whether the helper text is for a validation message
icon	string	No	undefined	The material icon to render to the start of the field
iconAlignEnd	bool	No	false	Whether the icon is aligned to the end of the field
id	string	No	uuidv1()	The id attribute of the field
label	string	Yes	N/A	The field's label
lengthMaximum	number	No	undefined	The maximum length of the field (HTML5 validation)
lengthMinimum	number	No	undefined	The minimum length of the field (HTML5 validation)
name	string	No	undefined	The name attribute of the input element
onBlur	func	No	undefined	The blur event handler
onChange	func	No	undefined	The change event handler
onDragStart	func	No	undefined	The dragstart event handler
onDrop	func	No	undefined	The drop event handler
onFocus	func	No	undefined	The focus event handler
onIconClick	func	No	undefined	The event handler when clicking on the icon
onKeyUp	func	No	undefined	The 'onkeyup' event handler
outlined	bool	No	false	Whether to display the outline style field
required	bool	No	false	Whether the field is required (HTML5 validation)
type	string	No	text	The field's type attribute (use textarea for a <textarea>)
valid	bool	No	undefined	Whether the field is valid or not (manual validation)
value	string	No	undefined	the value of the field