React Forms

Table of contents

  1. Overview
  2. Setup
  3. Buttons
  4. Elements


1. Overview Table of Contents

We support React tailored form helper similar to the Core\FormHelper for generating form elements, setting attributes, and presenting server side errors.

Setup by adding following line to your .jsx component:

import Forms from "@chappy/components/Forms";


2. Setup Table of Contents

To get started, import the Forms module, pass in your props, and import the Forms module.

import React from "react";
import Forms from "@chappy/components/Forms";
import {PasswordComplexityRequirements} from '@chappy/components/PasswordComplexityRequirements';

function Register({ users, errors }) {
    return (
        <form action="" className="form" method="post" encType="multipart/form-data">
        </form>
    )
}

CSRF

Every form needs a CSRF token to prevent CSRF attacks. Add the <Forms.CSRF /> component to the top of your form.

    <form action="" className="form" method="post" encType="multipart/form-data">
        <Forms.CSRF />
    </form>

Error Bag

To add the optional Error Bag add the <Forms.DisplayErrors /> component. Make sure you pass in the errors prop. The prop name error before the = sign must be spelled exactly as in the example.

Example:

function Register({ users, errors }) {
    return (
        <form action="" className="form" method="post" encType="multipart/form-data">
            <Forms.CSRF />
            <Forms.DisplayErrors errors={errors}/>
        </form>
    )
}

Add Your Elements and Buttons Add your elements and buttons by using supplied components. Elements, buttons, and submit button components are described in the following sections.

Example:

function Register({ users, errors }) {
    return (
        <form action="" className="form" method="post" encType="multipart/form-data">
            <Forms.CSRF />
            <Forms.Input 
                type="text"
                label="User name"
                name="username"
                value={user.username}
                inputAttrs=
                divAttrs=
                errors={errors}
            />
            
            ...

            <Forms.SubmitBlock
                label="Register"
                inputAttrs=
                divAttrs=
            />
        </form>
    )
}

Many components come with common prop names such as label, name, value, inputAttrs, divAttrs, and the optional error prop. Use error prop if you want validation message displayed below any field.

Prop names for each component is described for the corresponding sections below.


3. Buttons Table of Contents

Button

Returns Button component with text set. Supports ability to have functions for event handlers

Prop names:

  • {string} label - The contents of the button’s label.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.

Example:

<Forms.Button 
    label="My Button" 
    inputAttrs= 
/>


ButtonBlock

Supports ability to create a styled button and styled surrounding div block. Supports ability to have functions for event handlers.

Prop names:

  • {string} label - The contents of the button’s label.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.
  • {object} divAttrs - The values used to set the class and other attributes of the surrounding div. The default value is an empty object.

Example:

<Forms.ButtonBlock 
    label="My Button" 
    inputAttrs=
    divAttrs=
/>


SubmitBlock

Generates a div containing an input of type submit.

Prop names:

  • {string} label - The contents of the button’s label.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.
  • {object} divAttrs - The values used to set the class and other attributes of the surrounding div. The default value is an empty object.

Example:

<Forms.SubmitBlock 
    label="Submit" 
    inputAttrs=
    divAttrs=
/>


SubmitTag

Create a input element of type submit.

Prop names:

  • {string} label - The contents of the button’s label.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.
  • {object} divAttrs - The values used to set the class and other attributes of the surrounding div. The default value is an empty object.

Example:

<Forms.SubmitTag 
    label="Submit" 
    inputAttrs=
    divAttrs=
/>


4. Elements Table of Contents

CheckBoxLeftLabel

Generates a div containing an input of type checkbox with the label to the left.

Prop names:

  • {string} label - Sets the label for this input.
  • {string} name - Sets the value for the name, for, and id attributes for this input.
  • {string} value - The value we want to set. We can use this to set the value of the value attribute during form validation. Default value is the empty string. It can be set with values during form validation and forms used for editing records.
  • {bool} checked - The value for the checked attribute. If true this attribute will be set as checked=”checked”. The default value is false. It can be set with values during form validation and forms used for editing records.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.
  • {object} divAttrs - The values used to set the class and other attributes of the surrounding div. The default value is an empty object.
  • {Record<string, string[]>|string[]} [errors=[]] - The errors object. Default value is an empty object.

Example:

<Forms.CheckBoxLeftLabel
    label="Remember Me"
    name="remember_me"
    value="on"
    checked={rememberMeChecked}
    divAttrs=
/>


CheckBoxLeftRight

Generates a div containing an input of type checkbox with the label to the right.

Prop names:

  • {string} label - Sets the label for this input.
  • {string} name - Sets the value for the name, for, and id attributes for this input.
  • {string} value - The value we want to set. We can use this to set the value of the value attribute during form validation. Default value is the empty string. It can be set with values during form validation and forms used for editing records.
  • {bool} checked - The value for the checked attribute. If true this attribute will be set as checked=”checked”. The default value is false. It can be set with values during form validation and forms used for editing records.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.
  • {object} divAttrs - The values used to set the class and other attributes of the surrounding div. The default value is an empty object.
  • {Record<string, string[]>|string[]} [errors=[]] - The errors object. Default value is an empty object.

Example:

<Forms.CheckBoxLeftLabel
    label="Remember Me"
    name="remember_me"
    value="on"
    checked={rememberMeChecked}
    divAttrs=
/>


CSRF

Generates hidden component for csrf token.

Prop name:

  • {string} name - The name for the csrf token.

Example:

<Forms.CSRF />


Email

Renders an HTML div element that surrounds an input of type email.

Prop names:

  • {string} label - Sets the label for this input.
  • {string} name - Sets the value for the name, for, and id attributes for this input.
  • {string} value - The value we want to set. We can use this to set the value of the value attribute during form validation. Default value is the empty string. It can be set with values during form validation and forms used for editing records.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.
  • {object} divAttrs - The values used to set the class and other attributes of the surrounding div. The default value is an empty object.
  • {Record<string, string[]>|string[]} [errors=[]] - The errors object. Default value is an empty object.

Example:

<Forms.Email 
    label="Email"
    name="email"
    value={user.email}
    inputAttrs=
    divAttrs=
/>


Hidden

Generates a hidden input element.

Prop names:

  • {string} name - The value for the name and id attributes.
  • {string|number} - value The value for the value attribute.

Example:

<Forms.Hidden
    name="hidden_name"
    value={myValue}
/>


Input

Assists in the development of forms input blocks in forms. It accepts parameters for setting attribute tags in the form section. Not to be used for inputs of type “Submit” For submit inputs use the submitBlock or submitTag functions.

Prop names:

  • {'color'|'date'|'date-local'|'email'|'file'|'month'|'number'|'password'|'range'|'search'|'tel'|'text'|'time'|'url'|'week'} [type='text'] - The input type we want to generate.
  • {string} label - Sets the label for this input.
  • {string} name - Sets the value for the name, for, and id attributes for this input.
  • {string} value - The value we want to set. We can use this to set the value of the value attribute during form validation. Default value is the empty string. It can be set with values during form validation and forms used for editing records.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.
  • {object} divAttrs - The values used to set the class and other attributes of the surrounding div. The default value is an empty object.
  • {Record<string, string[]>|string[]} [errors=[]] - The errors object. Default value is an empty object.

Example:

<Forms.Input 
    type="text"
    label="User name"
    name="username"
    value={user.username}
    inputAttrs=
    divAttrs=
/>


Output

Generates an HTML output element.

Prop names:

  • {string} name - Sets the value for the name attributes for this input.
  • {string} forAttr - Sets the value for the for attribute.

Example:

<Forms.Output 
    name="my-name"
    forAttr="for-attr-value"
/>


Radio

Creates an input element of type radio with an accompanying label element. Compatible with radio button groups.

Prop names:

  • {string} label - Sets the label for this input.
  • {string} id - The id attribute for the radio input button.
  • {string} name - Sets the value for the name attribute.
  • {string} value - The value we want to set. We can use this to set the value of the value attribute during form validation. Default value is the empty string. It can be set with values during form validation and forms used for editing records.
  • {bool} checked - The value for the checked attribute. If true this attribute will be set as checked=”checked”. The default value is false. It can be set with values during form validation and forms used for editing records.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.
  • {object} divAttrs - The values used to set the class and other attributes of the surrounding div. The default value is an empty object.

Example:

<Forms.Radio 
    label="HTML"
    id="html"
    name="fav_language"
    value="HTML"
    checked={test1Var}
    inputAttrs=
/>
<Forms.Radio 
    label="CSS"
    id="css"
    name="fav_language"
    value="CSS"
    checked={test2Var}
    inputAttrs=
/>


RichText

Rich text editor field (TinyMCE) that posts HTML via a hidden input.

Behavior:

  • Decodes any HTML entities in value before seeding the editor (so <p> renders as a paragraph).
  • Uses TinyMCE as an uncontrolled editor; current HTML is mirrored into a hidden <input name={name}> so your PHP controller receives $_POST[name] as HTML.
  • UI skin CSS is expected to be imported elsewhere; skin:false prevents URL fetches.

Prop names:

  • {string} label - Sets the label for this input.
  • {string} name - Sets the value for the name, for, and id attributes for this input.
  • {string} value - The value we want to set. We can use this to set the value of the value attribute during form validation. Default value is the empty string. It can be set with values during form validation and forms used for editing records.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.
  • {object} divAttrs - The values used to set the class and other attributes of the surrounding div. The default value is an empty object.
  • {Record<string, string[]>|string[]} [errors=[]] - The errors object. Default value is an empty object.

Example:

<Forms.RichText
    label="Description"
    name="description"
    value={user.description || ""}
    inputAttrs=
    divAttrs=
/>


Select

Renders a select element with a list of options.

Prop names:

  • {string} label - Sets the label for this input.
  • {string} name - Sets the value for the name, for, and id attributes for this input.
  • {string} value - The value we want to set. We can use this to set the value of the value attribute during form validation. Default value is the empty string. It can be set with values during form validation and forms used for editing records.
  • {string} fieldName - The name of the field in the model to use.
  • {array} options - The list of options we will use to populate the
  • select option dropdown. The default value is an empty array.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.
  • {object} divAttrs - The values used to set the class and other attributes of the surrounding div. The default value is an empty object.
  • {Record<string, string[]>|string[]} [errors=[]] - The errors object. Default value is an empty object.

Example:

<Forms.Select 
    label="Example"
    name="options"
    value={selectedVal}
    fieldName="name"
    options={options}
    inputAttrs=
    divAttrs=
/>


Tel

Renders an HTML div element that surrounds an input of type tel.

Prop names:

  • {string} label - Sets the label for this input.
  • {string} name - Sets the value for the name, for, and id attributes for this input.
  • {string} value - The value we want to set. We can use this to set the value of the value attribute during form validation. Default value is the empty string. It can be set with values during form validation and forms used for editing records.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.
  • {object} divAttrs - The values used to set the class and other attributes of the surrounding div. The default value is an empty object.
  • {Record<string, string[]>|string[]} [errors=[]] - The errors object. Default value is an empty object.

Example:

<Forms.Tel 
    label="Cell Phone"
    name="cell"
    value={cellNumber}
    inputAttrs=
    divAttrs=
/>


TextArea

Assists in the development of textarea in forms. It accepts parameters for setting attribute tags in the form section.

Prop names:

  • {string} label - Sets the label for this input.
  • {string} name - Sets the value for the name, for, and id attributes for this input.
  • {string} value - The value we want to set. We can use this to set the value of the value attribute during form validation. Default value is the empty string. It can be set with values during form validation and forms used for editing records.
  • {object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.
  • {object} divAttrs - The values used to set the class and other attributes of the surrounding div. The default value is an empty object.
  • {Record<string, string[]>|string[]} [errors=[]] - The errors object. Default value is an empty object.

Example:

<Forms.TextArea
    label="Description"
    name="description"
    value={user.description || ""}
    inputAttrs=
    divAttrs=
/>