Material-UI Controls API

Github repo: https://github.com/concrete-form/mui

Controls

`<Input />`

an input of any type (text, number, password...). (text by default)
Render: <TextField />

Name	Type	Description
name	`string`	Name of the control, forwarded to the form library
fieldProps	`object`	Forwarded to the form library when registering the field (if available)

{...props}	`object`	Forwarded to `<TextField />` component

Example

import Form from '@concrete-form/react-hook-form'
import Input from '@concrete-form/mui/Input'

const Demo = () => (
  <Form>
    <Input name="demo" label="I'm an input" />
  </Form>
)

`<Autocomplete />`

a select control that can be filtered by typing
Render: <Autocomplete />

Name	Type	Description
name	`string`	Name of the control, forwarded to the form library
fieldProps	`object`	Forwarded to the form library when registering the field (if available)

textFieldProps	`object`	Forwarded to `<TextField />` inner component.
{...props}	`object`	Forwarded to `<Autocomplete />` component.

Options format

Check Material-UI doc for options format.

Example

import Form from '@concrete-form/react-hook-form'
import Autocomplete from '@concrete-form/mui/Autocomplete'

const Demo = () => (
  <Form>
    <Autocomplete
      name="demo"
      options={[ 'foo', 'bar', 'baz' ]}
      textFieldProps={{ label: 'I\'m an autocomplete field' }}
    />
  </Form>
)

`<DateTime />`

a date, time or datetime picker. This control handles a date object.
Render: <DatePicker />, <TimePicker />, or <DateTimePicker />,

tip

Don't forget to install @mui/x-date-pickers and to follow the setup instructions provided by Material-UI in order to use the Pickers components.

Name	Type	Default	Description
name	`string`		Name of the control, forwarded to the form library
fieldProps	`object`		Forwarded to the form library when registering the field (if available)

type	`"date" \| "time" \| "datetime"`	`"date"`	Type of input to render
{...props}	`object`		Forwarded to `<DatePicker />` , `<TimePicker />` or `<DateTimePicker />` component. (depending on `type` value)

Example

import Form from '@concrete-form/react-hook-form'
import DateTime from '@concrete-form/mui/DateTime'

const Demo = () => (
  <Form>
    date: <DateTime name="date" type="date" />
    time: <DateTime name="time" type="time" />
    datetime: <DateTime name="datetime" type="datetime" />
  </Form>
)

`<FileInput />`

a file(s) upload control
Render: <TextField type="file" />

note

At the moment, Material-UI doesn't have a proper File input component. They have a dropzone feature on their roadmap and we might implement a third party library in the future to offer a better experience.

Name	Type	Description
name	`string`	Name of the control, forwarded to the form library
fieldProps	`object`	Forwarded to the form library when registering the field (if available)

{...props}	`object`	Forwarded to `<TextField />` component

Example

import Form from '@concrete-form/react-hook-form'
import FileInput from '@concrete-form/mui/FileInput'

const Demo = () => (
  <Form>
    <FileInput name="demo" />
  </Form>
)

`<Select />`

a select that handles single or multiple values
Render: <TextField select />

Name	Type	Default	Description
name	`string`		Name of the control, forwarded to the form library
fieldProps	`object`		Forwarded to the form library when registering the field (if available)

options	`object`		Options to render in the select*
allowEmpty	`boolean`	`false`	if set to `true`, an empty option will be rendered on top.
children	`node`		An alternative to `options`. You can render your own children.
textFieldProps	`object`		Forwarded to `<TextField />` outer component.
{...props}	`object`		Forwarded to `<TextField SelectProps={...} />` property

*Options format

tip

See controls options for full options specs.

Options props are forwarded to <option /> or <MenuItem /> elements. (depending on native value.)
Group props are forwarded to <optgroup /> or <ListSubheader /> elements. (depending on native value.)

Example

import Form from '@concrete-form/react-hook-form'
import Select from '@concrete-form/mui/Select'

const Demo = () => (
  <Form>
    Single select :
    <Select name="select1" options={['foo', 'bar', 'baz', 'biz']} />

    Multiple select :
    <Select name="select2" options={['foo', 'bar', 'baz', 'biz']} multiple />

    Native select :
    <Select name="select3" native options={[
      { label: 'First option', value: 'foo' },
      'bar',
      { label: 'Third option', value: 'baz', props: { disabled: true } },
    ]} />

    Groups (allowEmpty) :
    <Select name="select4" allowEmpty options={[
      'foo',
      { group: 'Group 1', options: ['bar', 'baz'] }
    ]} />

    Childrens (native + allowEmpty) :
    <Select name="select5" native allowEmpty>
      <option value="foo">Foo</option>
      <option value="bar">Bar</option>
      <option value="baz">Baz</option>
    </Select>
  </Form>
)

`<SingleCheckbox />`

a single checkbox that is similar to a toggle switch. Perfect for terms and conditions. This control handles boolean values.
Render: <Checkbox />

tip

Great article about Checkbox vs Toggle Switch

Name	Type	Default	Description
name	`string`		Name of the control, forwarded to the form library
fieldProps	`object`		Forwarded to the form library when registering the field (if available)

label	`node`		Label of the checkbox
labelPosition	`"top" \| "bottom" \| "left" \| "right"`	`"right"`	Position of the label
formControlProps	`object`		Forwarded to `<FormControl />` wrapper
{...props}	`object`		Forwarded to `<Checkbox />` component

Example

import Form from '@concrete-form/react-hook-form'
import SingleCheckbox from '@concrete-form/mui/SingleCheckbox'

const Demo = () => (
  <Form>
    <SingleCheckbox name="demo" label={(
      <>I accept the <a href="#void">terms and conditions</a>.</>
    )} />
  </Form>
)

`<Slider />`

a slider to select a number within a range
Render: <Slider />

Name	Type	Default	Description
name	`string`		Name of the control, forwarded to the form library
fieldProps	`object`		Forwarded to the form library when registering the field (if available)

label	`string`		Label
labelPosition	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	Position of the label
orientation	`"horizontal" \| "vertical"`	`"horizontal"`	Orientation of the slider (Material-UI Prop)
height	`number`		Height of the slider in pixels. Required when `orientation` is set to vertical
formControlProps	`object`		Forwarded to `<FormControl />` wrapper
{...props}	`object`		Forwarded to `<Slider />` component

Example

import Form from '@concrete-form/react-hook-form'
import Slider from '@concrete-form/mui/Slider'

const Demo = () => (
  <Form>
    <Slider name="demo" min={10} max={90} label="Label of the slider" />
  </Form>
)

`<Textarea />`

a text input on multiple lines
Render: <Textfield multiple />

Name	Type	Default	Description
name	`string`		Name of the control, forwarded to the form library
fieldProps	`object`		Forwarded to the form library when registering the field (if available)

minRows	`number \| string`	`2`	Material-UI `minRows` property defaulted to 2.
{...props}	`object`		Forwarded to `<TextField />` component

Example

import Form from '@concrete-form/react-hook-form'
import Textarea from '@concrete-form/mui/Textarea'

const Demo = () => (
  <Form>
    <Textarea name="demo" label="I'm a textarea" />
  </Form>
)

`<ToggleSwitch />`

a boolean control that can be toggled on or off
Render: <Switch />

tip

Great article about Checkbox vs Toggle Switch

Name	Type	Default	Description
name	`string`		Name of the control, forwarded to the form library
fieldProps	`object`		Forwarded to the form library when registering the field (if available)

label	`node`		Label
labelPosition	`"top" \| "bottom" \| "left" \| "right"`	`"right"`	Position of the label
formControlProps	`object`		Forwarded to `<FormControl />` wrapper
{...props}	`object`		Forwarded to `<Switch />` component

Example

import Form from '@concrete-form/react-hook-form'
import ToggleSwitch from '@concrete-form/mui/ToggleSwitch'

const Demo = () => (
  <Form>
    <ToggleSwitch name="demo" label="I'm a toggle switch" />
    <ToggleSwitch name="disabled" disabled label="I'm a disabled toggle switch" />
    <ToggleSwitch name="disabled-active" disabled label="I'm a disabled + active toggle switch" />
  </Form>
  )
}

Control Groups

`<CheckboxGroup />`

a group of checkboxes
Render multiple: <Checkbox />

Name	Type	Default	Description
name	`string`		Name of the control, forwarded to the form library
fieldProps	`object`		Forwarded to the form library when registering the field (if available)

options	`object`		Options to render*
orientation	`"vertical" \| "horizontal"`	`"vertical"`	Orientation of the checkboxes
labelPosition	`"top" \| "bottom" \| "left" \| "right"`	`"right"`	Position of each label
formControlProps	`object`		Forwarded to `<FormControl />` wrapper
{...props}	`object`		Forwarded to each `<Checkbox />` components

*Options format

tip

See controls options for full options specs.

Options props are forwarded to <Checkbox /> component.
Options groups are not supported.

Example

import Form from '@concrete-form/react-hook-form'
import CheckboxGroup from '@concrete-form/mui/CheckboxGroup'

const Demo = () => (
  <Form>
    Vertical :
    <CheckboxGroup name="demo-vertical" options={['foo', 'bar', 'baz']} />

    <br /> Horizontal :
    <CheckboxGroup name="demo-horizontal" orientation="horizontal" options={[
      { label: <span style={{ color: 'deeppink' }}>Foo</span>, value: 'foo' },
      'bar',
      { label: 'baz', value: 'baz', props: { disabled: true } },
    ]} />
  </Form>
)

`<RadioGroup />`

a group of radio buttons
Render multiple: <Radio />

Name	Type	Default	Description
name	`string`		Name of the control, forwarded to the form library
fieldProps	`object`		Forwarded to the form library when registering the field (if available)

options	`object`		Options to render*
orientation	`"vertical" \| "horizontal"`	`"vertical"`	Orientation of the checkboxes
labelPosition	`"top" \| "bottom" \| "left" \| "right"`	`"right"`	Position of each label
formControlProps	`object`		Forwarded to `<FormControl />` wrapper
{...props}	`object`		Forwarded to each `<Radio />` components

*Options format

tip

See controls options for full options specs.

Options props are forwarded to <Radio /> component.
Options groups are not supported.

Example

import Form from '@concrete-form/react-hook-form'
import RadioGroup from '@concrete-form/mui/RadioGroup'

const Demo = () => (
  <Form>
    Vertical :
    <RadioGroup name="demo-vertical" options={['foo', 'bar', 'baz']} />

    <br /> Horizontal :
    <RadioGroup name="demo-horizontal" orientation="horizontal" options={[
      { label: <span style={{ color: 'deeppink' }}>Foo</span>, value: 'foo' },
      'bar',
      { label: 'baz', value: 'baz', props: { disabled: true } },
    ]} />
  </Form>
)

Form Controls

`<SubmitButton />`

a submit button that displays a loading indicator while the form is submitting
Render <Button type="submit" />

info

When submitting, this button will always be disabled. disableWhileSubmitting has no effect on this control. If the form contains errors, the button is also disabled.

Name	Type	Default	Description
displayLoading	`boolean`	`true`	If `true`, a loading indicator is added to the label. see `loadingComponent` below to customize what is appended.
loadingComponent	`node`	`<CircularProgress />`	Loading indicator to append to the label when the form is submitting. (default: `<CircularProgress />` )
alternateLoadingContent	`node`		If provided, this replaces the whole label of the button when submitting.
color	`string`	`"primary"`	Material-UI `color` property defaulted to "primary".
variant	`string`	`"contained"`	Material-UI `variant` property defaulted to "contained".
children	`node`		Content of the `<Button />`
{...props}	`object`		Forwarded to `<Button />` component

Example

import Form from '@concrete-form/react-hook-form'
import SubmitButton from '@concrete-form/mui/SubmitButton'

const wait = delay => new Promise(resolve => setTimeout(resolve, delay))

const Demo = () => (
  <Form onSubmit={() => wait(3000)}>
    <SubmitButton>Submit</SubmitButton>
  </Form>
)

Layout

`<LabelledControl />`

a wrapper that helps you create a 2 columns form
Render: <Grid /> components for the columns

info

By default, both columns are the same size (width 50%). On small devices, they are rendered vertically (width 100%).

Name	Type	Default	Description
label	`string`		Label
labelPosition	`top \| bottom \| left \| right`	`top`	Position of the label
children	`node`		Control to render
mainGridProps	`object`		Forwarded to the main `<Grid container />` component
labelGridProps	`object`		Forwarded to the label `<Grid item />` component
controlGridProps	`object`		Forwarded to the control `<Grid item />` component

Example

import Form from '@concrete-form/react-hook-form'
import LabelledControl from '@concrete-form/mui/LabelledControl'
import Input from '@concrete-form/mui/Input'
import RadioGroup from '@concrete-form/mui/RadioGroup'
import SingleCheckbox from '@concrete-form/mui/SingleCheckbox'

const Demo = () => (
  <Form>
    <LabelledControl label="Label linked to the control" labelPosition="left">
      <Input name="demo-single" />
    </LabelledControl>

    <LabelledControl label="Label NOT linked to the controls group" labelPosition="left">
      <RadioGroup name="demo-group" options={['foo', 'bar', 'baz']} />
    </LabelledControl>

    <LabelledControl label="Label NOT linked to boolean controls" labelPosition="left">
      <SingleCheckbox name="demo-bool" label="THIS is the real label" />
    </LabelledControl>
  </Form>
)

Material-UI Controls API

Controls​

<Input />​

Example​

<Autocomplete />​

Options format​

Example​

<DateTime />​

Example​

<FileInput />​

Example​

<Select />​

*Options format​

Example​

<SingleCheckbox />​

Example​

<Slider />​

Example​

<Textarea />​

Example​

<ToggleSwitch />​

Example​

Control Groups​

<CheckboxGroup />​

*Options format​

Example​

<RadioGroup />​

*Options format​

Example​

Form Controls​

<SubmitButton />​

Example​

Layout​

<LabelledControl />​

Example​

Controls

`<Input />`

Example

`<Autocomplete />`

Options format

Example

`<DateTime />`

Example

`<FileInput />`

Example

`<Select />`

*Options format

Example

`<SingleCheckbox />`

Example

`<Slider />`

Example

`<Textarea />`

Example

`<ToggleSwitch />`

Example

Control Groups

`<CheckboxGroup />`

*Options format

Example

`<RadioGroup />`

*Options format

Example

Form Controls

`<SubmitButton />`

Example

Layout

`<LabelledControl />`

Example