FinallyReact Design Library

Form

When websites want all your info

The Form component can be used by importing { Form } from "finallyreact". You can define any set of components as children to the Form component and it will automatically look for change events emitted to perform validations.

Note: Any child component you want to be tracked in the form must emit a change or submit event. FinallyReact user input components do this automatically. If a custom component does not emit a change event for a certain scenario, you can do so with { dispatchChangeEvent, dispatchSubmitEvent, dispatchCompositionEvent } from "finallyreact".

Important: Every Form component must have a unique id defined and each element in the form must have a unique name or id attribute defined (if both are defined, the name will take precedence). Form validation may not work correctly if these are not defined.

Example

Form values:

{}

Form with Initial Values

Form values:

{
  "default-first-name": "Marcie",
  "default-last-name": "Bubblegum",
  "default-age": 1000,
  "default-phone-number": "555-555-5555",
  "default-date": "2023-01-01",
  "default-amount": 9001,
  "default-check": [
    {
      "key": "first",
      "label": "First",
      "className": "mb-1/4",
      "defaultChecked": true
    },
    {
      "key": "second",
      "label": "Second",
      "className": "mb-1/4"
    },
    {
      "key": "disabled",
      "label": "Disabled",
      "disabled": true
    }
  ],
  "default-radio": "bunny",
  "default-dropdown": "vegan-pizza"
}

Reset Form Example

Submit Form

To submit a form, include any child component that emits a submit event. You can use FinallyReact's Button component with the 'submit' prop set to true. Or you can use the function { dispatchSubmitEvent } from "finallyreact" in any component to emit a custom submit event that the Form component will catch.

Form change values:

{}

Form submit values:

{}

Validations

You can define validation logic for each field in a form. The validations props of the form can be an object, where the key is the name or id of an element in the form, and the value can contain regex or a validate function.

If regex is defined, the value of the field will be tested against it every time there's a change to the field. If a validate function is defined, any changes to the field will be run against through that function. The validate function should return either a boolean or a string specifying a custom message for that field's validation.

You can also set the message property on a field's validation object which will be used as the validation message (if a boolean is returned by the validation function or if the regex test fails).

The onChange and onSubmit props of the form will emit both form values and validation messages.

Note: to show messages above or below individual components, refer to Message Wrapper

Form change values:

{}

Form submit values:

{}

Form Props

Prop Name	Prop Type	Description
id(required)	string	Identifier for Form
initialValues	object	Each key should match a name or id of a form field
onChange	(event) => void	Function to run when form is changed
onSubmit	(event) => void	Function to run when form is submitted
validations	{ [key: string]: object }	Validation rules for form fields
validations[key].message	string	Message to display when validation fails
validations[key].regex	RegExp	Regular expression for testing value
validations[key].validate	(value: any) => boolean \| string	Function to validate value, takes precedence over regex
values	{ [key: string]: any }	Values for form fields

Form

When websites want all your info

Example

Form values:

{}

Form with Initial Values

Form values:

{
  "default-first-name": "Marcie",
  "default-last-name": "Bubblegum",
  "default-age": 1000,
  "default-phone-number": "555-555-5555",
  "default-date": "2023-01-01",
  "default-amount": 9001,
  "default-check": [
    {
      "key": "first",
      "label": "First",
      "className": "mb-1/4",
      "defaultChecked": true
    },
    {
      "key": "second",
      "label": "Second",
      "className": "mb-1/4"
    },
    {
      "key": "disabled",
      "label": "Disabled",
      "disabled": true
    }
  ],
  "default-radio": "bunny",
  "default-dropdown": "vegan-pizza"
}

Reset Form Example

Submit Form

Form change values:

{}

Form submit values:

{}

Validations

You can also set the message property on a field's validation object which will be used as the validation message (if a boolean is returned by the validation function or if the regex test fails).

The onChange and onSubmit props of the form will emit both form values and validation messages.

Note: to show messages above or below individual components, refer to Message Wrapper

Form change values:

{}

Form submit values:

{}

Form Props

Prop Name	Prop Type	Description
id(required)	string	Identifier for Form
initialValues	object	Each key should match a name or id of a form field
onChange	(event) => void	Function to run when form is changed
onSubmit	(event) => void	Function to run when form is submitted
validations	{ [key: string]: object }	Validation rules for form fields
validations[key].message	string	Message to display when validation fails
validations[key].regex	RegExp	Regular expression for testing value
validations[key].validate	(value: any) => boolean \| string	Function to validate value, takes precedence over regex
values	{ [key: string]: any }	Values for form fields