React Forms

Overview
Setup
Buttons
CheckBoxLeftLabel()
CheckBoxRightLabel()
CheckboxGroup()
CSRFInput()
CSRFToken()
datalists
- A. DataListBlock()
- B. DataListColor()
- C. DataListDate()
- D. DataListDateTimeLocal()
- E. DataListInterval()
- F. DataListMonth()
- G. DataListText()
- H. DataListTime()
- I. DataListWeek()
DisplayErrors()
FieldErrors()
Hidden()
Input Components
- A. Input()
- B. Color()
- C. Confirm()
- D. Currency()
- E. DateSelector()
- F. DateTimeLocal()
- G. Email()
- H. fileSelector()
- I. Image()
- J. ImageBlock()
- K. Interval()
- L. Month()
- M. Number()
- N. Password()
- O. Search()
- P. Tel()
- Q. text()
- R. textArea
- S. Time()
- T. urlInput()
- U. week()
Output()
Radio Buttons
RememberMe()
RichText()
Select()
submitBlock()
SubmitTag()

1. Overview Table of Contents

We spport React tailored form helper similar to the Core\FormHelper for generating form elements, setting attrbutes, and presenting server side errors. Setup by adding following line to your .jsx component: jsx mport Forms from "@chappy/components/Forms;

2. Setup Table of Contents

To getstarted, 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>
   )

``
<br>
**CSRF**
Every form needs a CSRF token to prevent CSRF attacks.  Add the `<Forms.CSRF />` component to the top of your form.
``jsx
   <form action="" className="form" method="post" encType="multipart/form-data">
       <Forms.CSRFInput />
   </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.CSRFInput />
            <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.CSRFInput />
            <Forms.Text 
                label="User name"
                name="username"
                value={user.username}
                inputAttrs={{className: 'form-control input-sm'}}
                divAttrs={{className: 'form-group mb-3'}}
                errors={errors}
            />
            
            ...

            <Forms.SubmitBlock
                label="Register"
                inputAttrs={{className: 'btn btn-large btn-primary'}}
                divAttrs={{className: 'text-end'}}
            />
        </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={{className: 'btn btn-large btn-primary'}} 
/>

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={{className: 'btn btn-large btn-primary'}}
    divAttrs={{className: 'text-end'}}
/>

4. `CheckBoxLeftLabel = ({})` Table of Contents

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={{className: 'form-group mb-3'}}
/>

5. `CheckBoxRightLabel = ({})` Table of Contents

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.CheckBoxRightLabel
    label="Remember Me"
    name="remember_me"
    value="on"
    checked={rememberMeChecked}
    divAttrs={{className: 'form-group mb-3'}}
/>

6. `CheckboxGroup = ({})` Table of Contents

Renders a group of checkboxes sharing one name (submitted as name[]), one wrapping div, and ONE error span. Label-right per box.

Example:

<Forms.CheckboxGroup 
    name='acls'
    label='acls
    options={acls}
    value={userAcls}
    divAttrs={{className: 'form-check'}}
/>

Prop names:

{string} name - Group name WITHOUT ‘[]’ (added internally), e.g. ‘acls’.
{object} options - The list of options we will use to populate the radio group. The default value is an empty object.
{array} selectedValues - Values that should render checked (the current set).
{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.

Returns:

{HTMLDivElement} - A surrounding div and the accompanying nested group of checkbox inputs.

7. `CSRFInput = ({})` Table of Contents

Generates hidden component for csrf token.

Example:

<Forms.CSRFInput />

Prop name:

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

Returns:

{HTMLInputElement} - Input element of type hidden containing csrf token.

8. `CSRFToken = ({})` Table of Contents

Returns CSRF token that is used when a form is submitted.

Example:

Forms.CSRFToken(e)

Prop name:

{Event} e - The event associated with a form submission.

Returns:

{string} - The CSRF token string.

9. `datalists = ({})` Table of Contents

This section contains a listing of input functions paired with a datalist for suggestions.

Prop names common among all of these functions are:

{string} label - Sets the label for this input.
{string} name - Sets the value for the name, for, and id attributes for this input.
{string} listName - The list name and id for the datalist element.
{string|number} 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.
{array} options - A list of suggestions.
{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.

A. `DataListBlock()`

The parent of all datalist components.

It accepts an additional prop:

{string} - type The input type.

Returns:

{HTMLDListElement} - A surrounding div and the input element.

B. `DataListColor()`

Renders an HTML div element that surrounds an input of type color with an accompanying datalist of suggestions.

Example:

<Forms.DataListColor
    label="Choose a color"
    name="color"
    listName="colors"
    value=""
    options={['#800000', '#8B0000', '#A52A2A', '#DC143C']}
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

C. `DataListDate()`

Renders an HTML div element that surrounds an input of type date with an accompanying datalist of suggestions.

Example:

<Forms.DataListDate
    label="Choose a date"
    name="date"
    listName="dates"
    value=""
    options={['2026-10-07', '2026-10-08', '2026-10-09', '2026-10-10']}
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

D. `DataListDateTimeLocal()`

Renders an HTML div element that surrounds an input of type datetime-local with an accompanying datalist of suggestions.

Example:

<Forms.DataListDateTimeLocal
    label="Start date:"
    name="date"
    listName="dates"
    value=""
    options={['2026-10-07T14:05', '2026-10-08T06:44', '2026-10-09T20:20', '2026-10-1009:56']}
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

E. `DataListInterval()`

Renders an HTML div element that surrounds an input of type range with an accompanying datalist of suggestions.

Example:

const options = {
    0: 'Low',
    10: 'Fair',
    20: 'Medium',
    25: 'Good',
    45: 'High'
};

<Forms.DataListInterval
    label="Tip amount:"
    name="tick"
    listName="tickmarks"
    min={0}
    max={45}
    value=""
    options={options}
    divAttrs={{className: 'form-group mb-3 d-flex flex-column'}}
/>

F. `DataListMonth()`

Renders an HTML div element that surrounds an input of type month with an accompanying datalist of suggestions.

Example:

<Forms.DataListMonth
    label="Select a month:"
    name="month"
    listName="months"
    value=""
    options={['2026-09', '2026-10', '2026-11', '2026-12']}
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

G. `DataListText()`

Renders an HTML div element that surrounds an input of type text with an accompanying datalist of suggestions.

Example:

<Forms.DataListText
    label="Select an animal:"
    name="animal"
    listName="animals"
    value=""
    options={['Cat', 'Dog', 'Cow', 'Fish']}
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

H. `DataListTime()`

Renders an HTML div element that surrounds an input of type time with an accompanying datalist of suggestions.

Example:

<Forms.DataListTime
    label="Select a time:"
    name="time"
    listName="times"
    value=""
    options={['12:00', '13:00', '14:00', '15:00']}
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

I. `DataListWeek()`

Renders an HTML div element that surrounds an input of type week with an accompanying datalist of suggestions.

Example:

const options = {
    min: '2026-32',
    max: '2026-36'
};

<Forms.DataListWeek
    label="Select a week:"
    name="week"
    listName="weeks"
    value=""
    options={options}
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

10. DisplayErrors Table of Contents

Creates an error bag containing all existing errors.

Prop name:

{object} - errors Object containing errors.

Returns:

{HTMLDivElement} - The error bag.

11. FieldErrors Table of Contents

Renders an error message for a particular form field.

Prop names:

{object} errors - The error object.
{string} name - Used to search errors object for key/form field.

Returns:

{HTMLSpanElement} - The error message for a particular field.

12. Hidden Table of Contents

Generates a hidden input element.

Example:

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

Prop names:

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

Returns:

{HTMLInputElement} The html input element with type hidden

13. Input Components Table of Contents

This section contains a listing of input functions that are wrappers for the HTML input element.

Prop names common among all of these functions are:

{string} label - Sets the label for this input.
{string} name - Sets the value for the name, for, and id attributes for this input.
{string} listName - The list name and id for the datalist element.
{string|number} 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.

A. Input

The parent of all input components.

Example:

<Forms.Input 
    type="text"
    label="User name"
    name="username"
    value={user.username}
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

It accepts an additional prop:

{string} - type The input type.

Returns:

{HTMLDivElement} - A surrounding div and the input element.

B. Color

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

Example:

<Forms.Color
    label="Choose a color"
    name="color"
    listName="colors"
    value=""
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

C. Confirm

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

Example:

<Forms.Confirm 
    label="Confirm Password"
    name="confirm"
    value={user.confirm}
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

D. Currency

Renders an HTML div element that surrounds an input of type text for currency.

Example:

<Forms.Currency
    label="Amount"
    name="amount"
    value=""
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/> 

E. DateSelector

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

Example:

<Forms.DateSelector
    label="Choose a date"
    name="date"
    value=""
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

F. DateTimeLocal

Renders an HTML div element that surrounds an input of type datetime-local.

Example:

<Forms.DateTimeLocal
    label="Start date:"
    name="date"
    value=""
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

G. Email

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

Example:

<Forms.Email 
    label="Email"
    name="email"
    value={user.email}
    inputAttrs={{className: 'form-control input-sm', placeholder: 'joe@example.com'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

H. FileSelector

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

Multiple File Uploads: Use the $multiple flag to enable multiple file uploads. Name attribute will be formatted correctly and the multiple attribute will be added to the input element.

Example:

<Forms.FileSelector 
    type="file"
    label="Upload Profile Image (Optional)"
    name="profileImage"
    inputAttrs={{className: 'form-control', accept: 'image/gif image/jpeg image/png'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

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.
{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.
{boolean} multiple - Flag for turning on or off multiple file uploads.

Returns:

{HTMLDivElement} - A surrounding div and the input element of type file.

I. Image

Create a input element of type image.

Example:

import asset from "@chappy/utils/asset";

<Forms.Image 
     id={"submit"} 
     src={asset('public/logo.png', true)}
     width={100}
     height={50}
     inputAttrs={{className: 'pt-4'}}
/>

Prop names:

{string} id - The id attribute for the image input.
{string} src - The path to the image file.
{number} width - width of the image.
{number} height - height of the image.
{object} inputAttrs - The values used to set the class and other attributes of the input string. The default value is an empty object.

J. ImageBlock

Create a input element of type image.

Example:

import asset from "@chappy/utils/asset";

<Forms.ImageBlock 
     id={"submit"} 
     src={asset('public/logo.png', true)}
     width={100}
     height={50}
     inputAttrs={{className: 'pt-4'}}
     divAttrs={{className: 'pt-4 text-end'}}
/>

Prop names:

{string} id - The id attribute for the image input.
{string} src - The path to the image file.
{number} width - width of the image.
{number} height - height of the image.
{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.

K. Interval

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

Additional props:

{number} min - The minimum value for the interval.
{number} max - The maximum value for the interval.

Example:

<Forms.Interval
    label="Tip amount:"
    name="tick"
    min={0}
    max={45}
    value=""
    divAttrs={{className: 'form-group mb-3 d-flex flex-column'}}
/>

L. Month

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

Example:

<Forms.Month
    label="Select a month:"
    name="month"
    value=""
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

M. Number

Numeric input (integer or decimal) with optional thousands grouping and fixed precision.

Config keys (all optional):

Key	Type(s)	Description
`decimals`	`int`	Decimal places. 0 = integer. Default 0.
`useGrouping`	`bool`	Thousands separators on display. Default false.
`min`	`int\|float\|null`	HTML min. Default null (omitted).
`max`	`int\|float\|null`	HTML max. Default null (omitted).
`step`	`int\|float\|string\|null`	HTML step. Default derived from decimals.
`locale`	`string`	Intl locale for formatting. Default ‘en-US’.

Stores normalized (raw number, no separators); displays formatted.

Examples:

<Forms.Number 
    label="Integer"
    name="int_demo"
    value={42}
    config={{decimals: 0}}
/>

<Forms.Number
    label="2-decimal, grouped"
    name="price_demo"
    value={1234.5}
    config={{decimals: 2, useGrouping: true}}
/>

<Forms.Number
    label='2-decimal, no grouping'
    name='plain_demo'
    value={1234.5}
    config={{decimals:3, useGrouping: false}}
/>

Additional prop:

{object} config - Object of optional keys.

N. Password

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

Example:

<Forms.Password 
    label="Password"
    name="password"
    value={user.password}
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

O. Search

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

Example:

<Forms.Search 
    label="Search"
    name="search"
    value=""
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

P. Tel

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

Example:

<Forms.Tel 
    label="Cell Phone"
    name="cell"
    value={cellNumber}
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

Q. Text

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

Example:

<Forms.Text
    label="First Name"
    name="fname"
    value={user.fname}
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

R. TextArea

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

Example: {% raw %}

<Forms.TextArea
    label="Description"
    name="description"
    value={user.description || ""}
    inputAttrs={{ placeholder: 'Describe yourself here...' }}
    divAttrs={{ className: 'form-group mb-3' }}
/>

S. Time

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

Example:

<Forms.Time
    label="Select a time:"
    name="time"
    value=""
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

T. URLInput

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

Example:

<Forms.URLInput
    label="Enter a URL:"
    name="url"
    value=""
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

U. Week

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

Example:

<Forms.Week
    label="Select a week:"
    name="week"
    value=""
    inputAttrs={{className: 'form-control input-sm'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

14. Output Table of Contents

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"
/>

15. `Radio Buttons` Table of Contents

We support radio button groups that allow users to populate the input using information from your database.

Example:

<Forms.RadioGroup 
    name='inactive'
    options={options}
    valueSelected={user.inactive}
    inputAttrs={{className: 'form-check-input'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

Prop names:

{string} name - Sets the value for the name, for, and id attributes for this input.
{object} options - The list of options we will use to populate the radio group. The default value is an empty object.
{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.

Returns:

{HTMLDivElement} - A surrounding div and the accompanying nested group of radio inputs.

RadioInput Creates an input element of type radio with an accompanying label element.

Examples:

<Forms.Radio 
    label="HTML"
    id="html"
    name="fav_language"
    value="HTML"
    checked={test1Var}
    inputAttrs={{className: 'form-group me-1'}}
/>
<Forms.Radio 
    label="CSS"
    id="css"
    name="fav_language"
    value="CSS"
    checked={test2Var}
    inputAttrs={{className: 'form-group me-1'}}
/>

Prop names:

{string} label - Sets the label for this input.
{string} name - Sets the value for the name attribute 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. 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.

Returns:

{JSX.Element} - The radio input and its label.

16. `RememberMe` Table of Contents

Renders remember me checkbox.

Prop names:

{string} label - Sets the label for this input.
{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:

<RememberMe
    label="Remember Me"
    checked={rememberMeChecked}
    divAttrs={{className: 'form-group mb-3'}}
/>

17. `RichText` Table of Contents

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} listName - The list name and id for the datalist element.
{string|number} 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={{ placeholder: 'Describe yourself here...' }}
    divAttrs={{ className: 'form-group mb-3' }}
/>

18. `Select` Table of Contents

Renders a select element with a list of options.

Example:

<Forms.Select 
    label='Status'
    name='inactive'
    options={options}
    valueSelected={user.inactive}
    inputAttrs={{className: 'form-select'}}
    divAttrs={{className: 'form-group mb-3'}}
/>

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.

19. `SubmitBlock` Table of Contents

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={{className: 'btn btn-large btn-primary'}}
    divAttrs={{className: 'text-end'}}
/>

20. `SubmitTag` Table of Contents

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={{className: 'btn btn-large btn-primary'}}
    divAttrs={{className: 'text-end'}}
/>

React Forms

Table of contents

1. Overview Table of Contents

2. Setup Table of Contents

3. Buttons Table of Contents

4. CheckBoxLeftLabel = ({}) Table of Contents

5. CheckBoxRightLabel = ({}) Table of Contents

6. CheckboxGroup = ({}) Table of Contents

7. CSRFInput = ({}) Table of Contents

8. CSRFToken = ({}) Table of Contents

9. datalists = ({}) Table of Contents

A. DataListBlock()

B. DataListColor()

C. DataListDate()

D. DataListDateTimeLocal()

E. DataListInterval()

F. DataListMonth()

G. DataListText()

H. DataListTime()

I. DataListWeek()

10. DisplayErrors Table of Contents

11. FieldErrors Table of Contents

12. Hidden Table of Contents

13. Input Components Table of Contents

A. Input

B. Color

C. Confirm

D. Currency

E. DateSelector

F. DateTimeLocal

G. Email

H. FileSelector

I. Image

J. ImageBlock

K. Interval

L. Month

M. Number

N. Password

O. Search

P. Tel

Q. Text

R. TextArea

S. Time

T. URLInput

U. Week

14. Output Table of Contents

15. Radio Buttons Table of Contents

16. RememberMe Table of Contents

17. RichText Table of Contents

18. Select Table of Contents

19. SubmitBlock Table of Contents

20. SubmitTag Table of Contents

4. `CheckBoxLeftLabel = ({})` Table of Contents

5. `CheckBoxRightLabel = ({})` Table of Contents

6. `CheckboxGroup = ({})` Table of Contents

7. `CSRFInput = ({})` Table of Contents

8. `CSRFToken = ({})` Table of Contents

9. `datalists = ({})` Table of Contents

A. `DataListBlock()`

B. `DataListColor()`

C. `DataListDate()`

D. `DataListDateTimeLocal()`

E. `DataListInterval()`

F. `DataListMonth()`

G. `DataListText()`

H. `DataListTime()`

I. `DataListWeek()`

15. `Radio Buttons` Table of Contents

16. `RememberMe` Table of Contents

17. `RichText` Table of Contents

18. `Select` Table of Contents

19. `SubmitBlock` Table of Contents

20. `SubmitTag` Table of Contents