Form Component

Beta

0.1.1

<ecc-utils-design-form/>

EccUtilsDesignForm

Overview

This component is used to render a form with the given fields.

Preview

Examples

Basic Usage

EccUtilsDesignFormExample.tsx

import React from 'react';
import { Field } from '@elixir-cloud/design/dist/components/form/form';
import EccUtilDesignForm from '@elixir-cloud/design/dist/react/form/index';
 
export default function Form() {
  const fields: Field[] = [
    {
      key: 'service-name',
      label: 'Service name',
      type: 'text',
      fieldOptions: {
        required: true,
      },
    },
  ];
 
return <EccUtilDesignForm fields={fields} />
}

Properties

Property	Required	Default	Type	Description
`fields`	`true`		`fields`	Array of fields to be rendered in the form.

fields

This property is used to render the fields in the form. Fields can be passed as the array of objects. Each object represents a field. The object can have the following properties.

Property	Required	Default	Type	Description
key	`true`	`null`	`string`	Unique key for the field.
label	`true`	`null`	`string`	Label for the field.
type	`false`	`text`	`text`, `date`, `number`, `email`, `password`, `tel`, `url`, `search`, `datetime-local`, `time`, `file`, `switch`, `array`, `group`	Type of the field.
children	`false`	`null`	`array`	Children fields for the field if type is array. This allows fields to be added dynamically
fieldOptions.required	`false`	`false`	`boolean`	Whether the field is required or not.
fieldOptions.readonly	`false`	`false`	`boolean`	Determines is the field will be editable
fieldOptions.default	`false`	`null`	`string, boolean`	Value of the field
fieldOptions.multiple	`false`	`false`	`boolean`	Whether fields of type `file` accept multiple values. Only applies to fields of type `file`
fieldOptions.tooltip	`false`	`null`	`string`	Tooltip or help-text that will render a popup when hovered over label of form field.
fieldOptions.accept	`false`	`null`	`string`	A comma separated string that determines the types of files that fields of type `file` will accept. Example (opens in a new tab). Only applies to fields of type `file`
fieldOptions.returnIfEmpty	`false`	`false`	`boolean`	Determines if the data from an empty input field will be returned in the form data when empty.
arrayOptions.defaultInstances	`false`	`null`	`number`	Sets a default number of instances for fields of type `array` Only applies to fields of type `array`
arrayOptions.max	`false`	`null`	`number`	Sets a maximum number of instances for fields of type `array` Only applies to fields of type `array`
arrayOptions.min	`false`	`null`	`number`	Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min
groupOptions.collapsible	`false`	`null`	`number`
fileOptions.protocol	`false`	`native`	`string`	Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min
fileOptions.tusOptions	`false`	`null`	`Object ({ endpoint: string })`	Determines if a field of type `group` will be collapsible

Events

Event Name	React Event Name	Description
`ecc-utils-submit`	`EccUtilsSubmitEvent`	This event is fired when the form is submitted. The event detail contains the form data.

Methods

Method Name	Arguments	Description
`idle()`	`none`	Reset the form state to idle. Doesn't affect the form values.
`loading()`	`none`	Set the form state to loading. Disables the submit button.
`success()`		Set the form state to success. Show the success message.
`error()`		Set the form state to error. Show the error message at end.
`disableSubmit()`	`boolean`	Toggled the disable state on the form submit button

Details