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 |