Documentation
Design Package
Components
Form

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

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

PropertyRequiredDefaultTypeDescription
keytruenullstringUnique key for the field.
labeltruenullstringLabel for the field.
typefalsetexttext, date, number, email, password, tel, url, search, datetime-local, time, file, switch, array, groupType of the field.
childrenfalsenullarrayChildren fields for the field if type is array. This allows fields to be added dynamically
fieldOptions.requiredfalsefalsebooleanWhether the field is required or not.
fieldOptions.defaultfalsenullstring, booleanValue of the field
fieldOptions.multiplefalsefalsebooleanWhether fields of type file accept multiple values. Only applies to fields of type file
fieldOptions.tooltipfalsenullstringTooltip or help-text that will render a popup when hovered over label of form field.
fieldOptions.acceptfalsenullstringA 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.returnIfEmptyfalsefalsebooleanDetermines if the data from an empty input field will be returned in the form data when empty.
arrayOptions.defaultInstancesfalsenullnumberSets a default number of instances for fields of type array Only applies to fields of type array
arrayOptions.maxfalsenullnumberSets a maximum number of instances for fields of type array Only applies to fields of type array
arrayOptions.minfalsenullnumberSets 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.collapsiblefalsenullnumberDetermines if a field of type group will be collapsible

Events

Event NameReact Event NameDescription
ecc-utils-submitEccUtilsSubmitEventThis event is fired when the form is submitted. The event detail contains the form data.

Methods

Method NameArgumentsDescription
idle()noneReset the form state to idle. Doesn't affect the form values.
loading()noneSet 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()booleanToggled the disable state on the form submit button
Elixir Cloud & AAICloud SDKElixir

Released under Apache 2.0 License.

Copyright © 2023-2024 ELIXIR