@materialr/textfield NPM

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