@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.