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.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 | 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 |