HTML5 Controls API

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

Controls

<Input />

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

	Name	Type	Required	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)
	{...props}	object			Forwarded to <input /> element

Example

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

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

<Autocomplete />

Render: <input autocomplete="on" />

note

There is no rich autocomplete feature in HTML5. This control should be avoided when using HTML5.

	Name	Type	Required	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)
	{...props}	object			Forwarded to <input /> element.

Example

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

const Demo = () => (
  <Form>
    <Autocomplete name="demo" placeholder="I'm a boring autocomplete field" />
  </Form>
)

<DateTime />

a date, time or datetime picker. This control handles a date object.
Render: <input type="date" />

	Name	Type	Required	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 <input /> element

Example

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

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

date:

time:

datetime:

<FileInput />

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

	Name	Type	Required	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)
	{...props}	object			Forwarded to <input /> element

Example

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

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

<Select />

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

	Name	Type	Required	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 HTML5 elements.
	{...props}	object			Forwarded to <input /> element

*Options format

tip

See controls options for full options specs.

• Options props are forwarded to <option /> elements.
• Group props are forwarded to <optgroup /> elements.

Example

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

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

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

    Labelled options :
    <Select name="select3" 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 (allowEmpty) :
    <Select name="select5" allowEmpty>
      <option value="foo">Foo</option>
      <option value="bar">Bar</option>
      <option value="baz">Baz</option>
    </Select>
  </Form>
)

String options :

foobarbazbiz

Multiple select :

foobarbazbiz

Labelled options :

First optionbarThird option

Groups (allowEmpty) :

foobarbaz

Childrens (allowEmpty) :

FooBarBaz

<SingleCheckbox />

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

tip

Great article about Checkbox vs Toggle Switch

	Name	Type	Required	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
	containerProps	object			Forwarded to the container ( <label /> element). The container contains the checkbox and the label.
	{...props}	object			Forwarded to <input /> element

Example

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

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

I accept the terms and conditions.

<Slider />

a slider to select a number within a range
Render: <input type="range" />

	Name	Type	Required	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
	containerProps	object			Forwarded to the container ( <label /> element). The container contains the slider and the label.
	{...props}	object			Forwarded to <input /> element

Example

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

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

Label of the slider

<Textarea />

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

	Name	Type	Required	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)
	{...props}	object			Forwarded to <textarea /> element

Example

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

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

<ToggleSwitch />

a boolean control that can be toggled on or off
Render: <input type="checkbox" />

tip

Great article about Checkbox vs Toggle Switch

note

In HTML5, a toggle switch is a checkbox with CSS. You need to use our CSS import or create your own. Additionnaly, you can use the available props to customize each HTML elements.

	Name	Type	Required	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
	containerProps	object			Forwarded to the container ( <label /> element). The container contains the toggle switch and the label.
	toggleSwitchContainerProps	object			Forwarded to the toggle switch container ( <label /> element). The toggle switch container contains: the hidden input ( <input /> ) and the moving slider ( <div /> element)
	toggleSwitchSliderProps	object			Forwarded to the toggle switch moving part ( <div /> element)
	{...props}	object			Forwarded to <input /> element

Example

import Form from '@concrete-form/react-hook-form'
import ToggleSwitch from '@concrete-form/html5/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>
  )
}

I'm a toggle switch

I'm a disabled toggle switch

I'm a disabled + active toggle switch

Control Groups

<CheckboxGroup />

a group of checkboxes
Render multiple: <input type="checkbox" />

	Name	Type	Required	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
	itemContainerProps	object | function			Forwarded to every option container ( <label /> element). The container contains the checkbox and the label. Function: If a function is provided, that function will receive option's props (if available) and must return props for the item container.
	itemLabelContainerProps	object | function			If provided, the label will be wrapped with a <div /> element with the given props. Function: If a function is provided, that function will receive option's props (if available) and must return props for the label container.
	{...props}	object			Forwarded to each <input /> element

*Options format

tip

See controls options for full options specs.

• Options props are forwarded to <input /> element.
• Options groups are not supported.

Example

import Form from '@concrete-form/react-hook-form'
import CheckboxGroup from '@concrete-form/html5/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>
)

Vertical :

foo

bar

baz

Horizontal :

Foo

bar

baz

<RadioGroup />

a group of radio buttons
Render multiple: <input type="radio" />

	Name	Type	Required	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
	itemContainerProps	object | function			Forwarded to every option container ( <label /> element). The container contains the radio and the label. Function: If a function is provided, that function will receive option's props (if available) and must return props for the item container.
	itemLabelContainerProps	object | function			If provided, the label will be wrapped with a <div /> element with the given props. Function: If a function is provided, that function will receive option's props (if available) and must return props for the label container.
	{...props}	object			Forwarded to each <input /> element

*Options format

tip

See controls options for full options specs.

• Options props are forwarded to <input /> element.
• Options groups are not supported.

Example

import Form from '@concrete-form/react-hook-form'
import RadioGroup from '@concrete-form/html5/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>
)

Vertical :

foo

bar

baz

Horizontal :

Foo

bar

baz

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	Required	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		"..."	Loading indicator to append to the label when the form is submitting
	alternateLoadingContent	node			If provided, this replaces the whole label of the button when submitting.
	children	node			Content of the <button />
	{...props}	object			Forwarded to <button /> element

Example

import Form from '@concrete-form/react-hook-form'
import SubmitButton from '@concrete-form/html5/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 label with a control (horizontal or vertical layout)

	Name	Type	Required	Default	Description
	label	string			Label
	labelPosition	top | bottom | left | right		top	Position of the label
	children	node			Control to render
	mainContainerProps	object			Forwarded to the main div container
	labelContainerProps	object			Forwarded to the label div wrapper
	controlContainerProps	object			Forwarded to the control div wrapper

Example

import Form from '@concrete-form/react-hook-form'
import LabelledControl from '@concrete-form/html5/LabelledControl'
import Input from '@concrete-form/html5/Input'
import RadioGroup from '@concrete-form/html5/RadioGroup'
import SingleCheckbox from '@concrete-form/html5/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>
)

Label linked to the control

foo

bar

baz

Label NOT linked to the controls group

THIS is the real label

Label NOT linked to boolean controls