Form Components

Form Component is UI type to present in form it have main 3 type of component

  • Layout

    HypeSDK base on React/Bootstrap so the layout wii use as component by provided 3 type of layout Container, Row and Col.

  • Decorator

    this type use to render html element that not interact with any data example Label but still can customize or binding data to it.

  • Input

    use to render html input or out customize input which this type need to reference to  form field to working.It will render selected field data to input and when user save data in filed if sending to save. Input will be emit event when it has change see more in Script & Event

  • Utility

    use to render element that can interact with use but not require to reference with any form field  example Datatable, Button.

Form Layout

Container

Container is root of layout and can only appear in root only. It use to group Row inside container to make section in form

Row

Row is layout for container Column by it can be contained in Container and Column except it self. use to grouping Column inside.
tipRow can be nested in Column.

Column

Column is layout for contain Component or Row but Column can only contained by Row only. Sizing base on bootstrap you can specify width by 12 scale it seperated breakpoint to sm and md.

Box Config

Form component can config by provided GUI sidebar it will call Box Config

By default every component can be set ID, Slug and Label.

  • ID: id for render and ref to html element.
  • Slug: is the name to ref in Script & Event.
  • Label: a default label may use in different place by each component.

Label

Label use for present static text can be set style or prefix with html variant h1,h2,h3

tip use html variant for make text responsive.

Button

input use for single answer yes/no store data as boolean.

Text Input

take input as string can be setting Label and Placeholder.

Number Input

take input as number can be setting Label and Placeholder. input will be parse as number to save. Has 2 type number and float. Float type will always save data as number with decimal.

Datetime Input

input present interact UI for select date and time. Has 3 type Date, Time and Date&Time.
  • Date: present UI for select only date
  • Time: present UI for select only time
  • Date&Time: present UI for select both date and time together

Radio Input

input present choice select for user work same as select. this input has 2 setting for store data is store selected choice as number or string.

tip decide type to store base on how to use the data.

Checkbox Input

input use for single answer yes/no store data as boolean.

Select Input

input use for single answer yes/no store data as boolean.

Datatable

input use for single answer yes/no store data as boolean.