Crayons

# Form (fw-form)

Dynamic Form - Render dynamic form based on the schema passed as a prop.
Static Form - Render form based on the children passed as slots.

# Demo Dynamic Form

Pass formSchema to render Dynamic Form. You can also pass initialValues to the form.

Submit Reset
Show Code

# form schema

form schema should follow the below structure:

name: '', // Name of the form.
fields: [ // Each item in this array corresponds to a crayons input component.
  {
    id: '2978f820-704b-46c7-9f88-110e14e34a8c', // ID of the input control
    name: 'first_name', // Will be used while serializing form.
    label: 'First Name', // Label to display.
    type: '', // Type of the crayons input component. Possible values are TEXT/NUMBER/DECIMAL/DROPDOWN/MULTI_SELECT/RADIO/CHECKBOX/ DATE/PARAGRAPH/EMAIL/TIME
    position: 3, // Order of the component in the form.
    required: true, // Required while submitting the form.
    placeholder: 'Enter…', // placeholder for the input
    hint: 'Please provide a text of at max 100 characters', // Hint text to be displayed below.
    choices: [], // List of options for DROPDOWN/MULTI_SELECT types. Each option should be of below structure:
    {
    id: 1, // ID for the option.
    text: '', // Text for the option.
    value: '', // Value for the option.
    }
  }
]
}

# Usage Dynamic Form

# Demo Static Form

You can pass initialValues to the form. Wrap all the form controls with form-control under fw-form.

For Crayons controls just pass the type, name, placeholder,required, label properties to fw-form-control.

For custom input controls, pass the custom input as slot to fw-form-control. For setting its value in the form, use the method like handleCustomInput shown in the below example.

Submit Reset
Show Code

# Usage Static Form

# Validations

Validation can be done using Yup (opens new window) based validationSchema or validate function prop.

# Validations Usage

You can use validationSchema prop to do Yup based validation.

const validationSchema = Yup.object().shape({
  first_name: Yup.string()
    .required('First name is required')
    .min(5, 'min 5 char')
    .nullable(),
});
// get reference to fw-form and set validationSchema prop.

You can also use validate async funciton prop to do any custom validation.

const validate = async (values: any) => {
  // do custom validation and return error or {}
  return {
    // last_name: "last name is errored",
  };
};
// get reference to fw-form and set validate function prop.

Both validationSchema and validate prop can be used together.

# Properties

Property Attribute Description Type Default
formId form-id Id to uniquely identify the Form. If not set, a random Id will be generated. any uuidv4()
formSchema form-schema Schema to render Dynamic Form. Contains an array of fields pointing to each form control. Please see the usage reference for examples. any {}
initialValues initial-values Initial field values of the form. It is an object with keys pointing to field name any {}
validate validate Validate the form's values with an async function. Should return a Promise which resolves to an errors object. The keys in the errors object must match with the field names. any undefined
validateOnBlur validate-on-blur Tells Form to validate the form on each input's onBlur event boolean true
validateOnInput validate-on-input Tells Form to validate the form on each input's onInput event boolean true
validationSchema validation-schema YUP based validation schema for handling validation any {}
wait wait The number of milliseconds to delay before doing validation on Input number 200

# Methods

# doReset(e: any) => Promise<void>

# Returns

Type: Promise<void>

# doSubmit(e: any) => Promise<FormSubmit>

# Returns

Type: Promise<FormSubmit>

# setFieldErrors(errorObj: FormErrors<FormValues>) => Promise<void>

# Returns

Type: Promise<void>

# setFieldValue(field: string, value: any, shouldValidate?: boolean) => Promise<void>

# Returns

Type: Promise<void>

# Dependencies

# Depends on

# Graph

graph TD;
  fw-form --> fw-form-control
  fw-form-control --> fw-input
  fw-form-control --> fw-textarea
  fw-form-control --> fw-datepicker
  fw-form-control --> fw-checkbox
  fw-form-control --> fw-radio-group
  fw-form-control --> fw-radio
  fw-form-control --> fw-select
  fw-form-control --> fw-timepicker
  fw-input --> fw-icon
  fw-icon --> fw-toast-message
  fw-toast-message --> fw-spinner
  fw-toast-message --> fw-icon
  fw-datepicker --> fw-select-option
  fw-datepicker --> fw-button
  fw-datepicker --> fw-popover
  fw-datepicker --> fw-input
  fw-datepicker --> fw-icon
  fw-datepicker --> fw-select
  fw-select-option --> fw-icon
  fw-select-option --> fw-checkbox
  fw-select-option --> fw-avatar
  fw-checkbox --> fw-icon
  fw-button --> fw-spinner
  fw-button --> fw-icon
  fw-select --> fw-tag
  fw-select --> fw-popover
  fw-select --> fw-button
  fw-select --> fw-spinner
  fw-select --> fw-icon
  fw-select --> fw-list-options
  fw-tag --> fw-avatar
  fw-tag --> fw-icon
  fw-list-options --> fw-select-option
  fw-list-options --> fw-input
  fw-timepicker --> fw-select
  fw-timepicker --> fw-select-option
  style fw-form fill:#f9f,stroke:#333,stroke-width:4px

Built with ❤ at Freshworks

← Form Control (fw-form-control) →