README
@cordelta/react-forms-material
Beautiful, ultra simple, stateless, validated forms for use in React function components.
A demo is available at https://cordeltadigital.github.io/react-forms-material/.
Installation
yarn add @cordelta/react-forms-material
Usage
import React from 'react'
import { Form, Text, Select, Radio, Checkbox, Submit } from '@cordelta/react-forms-material'
export default ({ onSubmit, initialValues }) => (
<Form onSubmit={onSubmit} values={initialValues}>
<Text name="name" label="Name" required minLength="5" maxLength="50" />
<Text name="description" label="Description" multiline maxLength="100" />
<Select name="type" label="Type" values={['', 'Widget', 'Component']} required />
<Radio name="rating" label="Rating" values={[1, 2, 3]} row />
<Checkbox name="urgent" label="Urgent" />
<Submit>Submit</Submit>
</Form>
)
Core Components
Form
All input components must be contained within a Form
component.
Props
Name | Type | Description |
---|---|---|
values | object | Object containing initial values for form elements |
onSubmit | function(values) | A callback to be executed when the corresponding Submit component is clicked |
All other props are passed on to the underlying form
element.
Submit
Renders a Material UI Button
component that triggers the closest Form
component's onSubmit
callback.
Props
All props are passed on to the underlying Button
component.
Button
A pass through of the Material UI Button
component for convenience.
Field Components
Field components are constructed by wrapping a Material UI InputLabel
component,
a form component and FormHelperText
component within a
FormControl
component, similar to a
TextField
component.
All field components can be passed the following props:
Name | Type | Description |
---|---|---|
name | string | Specifies the name of the property to populate with the field value (required) |
label | string | Text on the field's label |
value | any | Initial value for the field. The DOM API will generally cast this to a string |
helperText | string | Specifies the helper text for the field |
The following props are passed to the parent FormControl
component:
Name | Type | Description |
---|---|---|
className | string | Class name to apply to the component |
fullWidth | boolean | Specifies that the field should occupy the full width of its parent |
variant | string | Corresponds to the variant prop of a FormControl . One of standard , outlined or filled |
margin | string | Corresponds to the margin prop of a FormControl . One of none , dense or normal . Most fields, except Text default to normal |
All other props are passed to the input component, as described below.
Text
Renders a field component with a Material UI Input
component as the input
component.
Select
Renders a field component with a Material UI Select
component as the input
component. Options are specified using the props below and are rendered as
MenuItem
components.
Props
Name | Type | Description |
---|---|---|
values | array(any) | Specifies the values to use for each option. The DOM API casts these to strings |
labels | array(string) | Specifies the labels to use for each corresponding option in the values array. If not specified, entries from the values array are used. |
Radio
Renders a field component with a Material UI RadioGroup
component as the
input component. Options are specified using the props below and are rendered as RadioButton
components, described
in the next section.
Props
Name | Type | Description |
---|---|---|
values | array(any) | Specifies the values to use for each option. The DOM API casts these to strings |
labels | array(string) | Specifies the labels to use for each corresponding option in the values array. If not specified, entries from the values array are used |
RadioButton
Renders a field component with a Material UI Radio
component as the input
component.
Checkbox
Renders a field component with a Material UI Checkbox
component as the
input component.