Module "elements"

// A bare form example ... remember to set the {@link Form.bare} property to `true`
 import {CheckBoxField} from "react-base-forms";

 const state = { password: "", confirmPassword: "" };

<CheckBoxField
  name="terms"
  checked={state.terms}
/>

// Example with Bootstrap styling (Bootstrap styling comes as default)
<CheckBoxField
  name="terms"
  checked={state.terms}
  hint="Click to agree"
  labeltext="Agree to terms & conditions"
/>

A Date picker with optional validation

   <DatePickerField
       value={fpState.date}
       name="date"
       datePickerClassNames="yourClassnames"
       // Optional validators
       validators={[isValidDate(["2021-01-10", "2021-03-10"])]}
   />

 import {EmailField} from "react-base-forms"

 const state = { email: "" }

// A bare form example ... remember to set the {@link Form.bare} property to `true`
<EmailField
   value={state.email}
   name="email"
/>

// Example with Bootstrap styling (Bootstrap styling comes as default)

<EmailField
   value={state.email}
   name="email"
   hint="Needs to be at least 50 characters long"
   labeltext="Username"
 />

There is a bug when working with React & input fields. See https://github.com/facebook/react/issues/955 We have provided a fix for TextInputField and PasswordField fields but not EmailField fields. If you wish to avoid the cursor jumping bug, then use a TextInputField with the isEmailValid validator. For example:

   <TextInputField
      value={state.email}
      name="Must be a valid email"
      labeltext="Email"
     validators={[isEmailValid()]}
   />

 import {areFieldsEqual, isFieldEmpty, PasswordField} from "react-base-forms";

 const state = { password: "", confirmPassword: "" };

// A bare form example ... remember to set the {@link Form.bare} property to `true`
<PasswordField
   value={state.password}
   name="username"
   validators={[isFieldEmpty(8)]}
/>

// Example with Bootstrap styling (Bootstrap styling comes as default)

<PasswordField
   value={state.confirmPassword}
   name="password"
   hint="Needs to be at least 8 characters long"
   labeltext="Password"
 />

Also we can create two PasswordField components to confirm passwords are equal. Please see areFieldsEqual for more info. The first PasswordField has has a name prop of password & the second PasswordField a name prop of confirmPassword*. Then we can add a areFieldsEqual validator to the *PasswordField with the confirmPassword name props (also notice how areFieldsEqual takes the first PasswordField name as an argument).

<PasswordField
 name="password"
 // other props...

/>

<PasswordField
 name="confirmPassword"
 // other props...
 validators={[areFieldsEqual("password")]}
/>

This field provides a list of options to select from using the onChange event. IQueryField.queryresults is the an array of objects (usually returned from a remote api) IQueryField.objectkey is the key of the value you require to display when the user begins to type

 let fruitState = [{name: "peach"},{name: "plum"}]

 <QueryInputField
     value={fpState.fruit}
     name="fruit"
     hint="Enter your Fruit"
     labeltext="fruit"
     validators={[isFieldEmpty(2)]}
     queryresults={fruitState}
     objectkey="name"
 />

 import {isRadioChecked, RadioField, RadioGroup} from "react-base-forms";

 const state = { male: true, female: false };

 <RadioGroup name="group1">
   <RadioField
     name="male"
     checked={state.male}
     hint="Click to agree"
     labeltext="Agree to terms & conditions"
   />

   <RadioField
     name="female"
     checked={state.female}
     hint="Click to agree"
     labeltext="Agree to terms & conditions"
     validators={[isRadioChecked()]}
   />

 </RadioGroup>

IRadioGroupProps

 import {CheckBoxField} from "react-base-forms";

 const state = { male: true, female: false };

 <RadioGroup name="group1">
   // place RadioFields components here...
 </RadioGroup>

 import {SelectField} from "react-base-forms";

 const state = { fruitChoice: "" };

<SelectField
  size="lg"
  value={state.fruitChoice}
  name="fruitChoice"
  options={["banana", "apple", "orange"]}
 />

You can also pass an array of objects but you must use both the objectKey & objectvalue props. the objectKey will update your state value & the objectvalue is what is displayed to the user as an option.

// This is your option data
let selectData = [
  {id: 1, name: "first"},
  {id: 2, name: "second"},
];
// The state which will receive the update
let state = {
   select_data_id: undefined as any,
};

<SelectField
  size="lg"
  value={state.select_data_id}
  name="fruitChoice"
  objectkey="id" // Value will update state.select_data_id e.g *1, 2...*
  objectvalue="name" // Value will be displayed in the select field e.g *first, second...*
  options={selectData}
/>

 *  import {CheckBoxField} from "react-base-forms";

 const state = { about: "" };
// A bare form example ... remember to set the {@link Form.bare} property to `true`
<TextAreaField
   value={state.about}
   name="about"
   validators={[isFieldEmpty(20)]}
/>

// Example with Bootstrap styling (Bootstrap styling comes as default)

<TextAreaField
   name="about"
   value={state.about}
   hint="Must be at least 20 characters"
   labeltext="About you..."
   validators={[isFieldEmpty(20)]}
/>

 import {TextInputField} from "react-base-forms"

 const state = { username: "" }

// A bare form example ... remember to set the {@link Form.bare} property to `true`
<TextInputField
   value={state.username}
   name="username"
/>

// Example with Bootstrap styling (Bootstrap styling comes as default)

<TextInputField
   value={state.username}
   name="username"
   hint="Needs to be at least 50 characters long"
   labeltext="Username"
 />