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 |