Field

A field allows a user to edit text, and provides a label and error message. Fields work with Inputs and Textareas.

🙌 Heads up! This code is editable. The preview above will update to reflect your changes.

Usage

import { Field } from 'materialish';
import 'materialish/materialish.css';

Prop Name	Default Value	Description
className		Additional class name(s) to add to the menu item
required	false	Whether or not the value that this field represents is required
children		Render the Input, Label, and ErrorMessage as children
nodeRef		Pass a ref to get access to the root node
...rest		The rest of the props are spread on the underlying `label` element

Variable	Default Value	Description
--mt-baseFontSize	1rem	The text size and dimensions of the button are based off of this value
--mt-fontFamily	'Roboto'	The font family to use for the button text
--mt-field-labelColor	#757575	The color of the `Field.Label` text
--mt-field-labelErrorColor	#f34335	The color of the `Field.ErrorMessage` text

This is an alias of Input.

This is an alias of TextArea.

Prop Name	Default Value	Description
className		Additional class name(s) to add to the menu item
children		The value to display as the label
nodeRef		Pass a ref to get access to the root node
...rest		The other props are spread onto the underlying element

Prop Name	Default Value	Description
className		Additional class name(s) to add to the menu item
children		The message to display as the error
nodeRef		Pass a ref to get access to the root node
...rest		The other props are spread onto the underlying element