Introduction

Components are graphical user interface controls used to render information on screen. Some components let user edit the value they are bound to, we call them inputs. Typical components are a textbox, a checkbox, a radio group, a table, and so on.

The components are defined in a form's definition json, including some common attributes and some component-specific attributes. Most attribute values allow expressions in addition to the type shown in the attribute table.

Common attributes

Common attributes are attributes used by most components.
When we reference common attributes in other parts of the documentation, we are referring to this table:

Attribute	Type	Description
id	string	ID added to the top-most DOM element of the component as data-flw-id attribute
type	string	Type of component e.g. "text", "boolean", "dataTable"
value	string	Attribute from the payload the component is bound to, usually an expression without operators, e.g. {{my_value}}
defaultValue	string	Value to be assigned when the form is loaded with an empty payload
description	string	Text to be rendered after the input as a component description
enabled	boolean	If false the component will be disabled
isRequired	boolean	If true the form won't be valid until this component has some value
label	string	Text to be rendered before the input as a component label
size	number	Number of columns to be used in the 12 column row
styleClass	string	Class added to the top-most DOM element of the component
visible	boolean	If false the component will be hidden (validations still apply)
ignore	boolean	If true the component will be hidden and the value won't be part of the payload. See ignore section below for important notes
labelAlign	string	"top": label is place on top of the input, "left": label is at the left of the input
tooltip	string	When it is defined, a question mark icon will appear in the coponent label. When the user hovers over it it will show this text in a tooltip.
placeholder	string	Placeholder text for data entry components

Ignore, Visible and Enabled

• If visible = false or ignore = true the component won't be rendered.
• If a component becomes ignored (its ignore attribute expression becomes true) the value the component is bound too will be deleted from the payload. If a container component becomes ignored, it's children values will be deleted too.
• If the component is ignored or not enabled the validations won't apply. And this component won't make the form validations to fail.
• If the component is not enabled and not visible, the component won't be rendered or validated, and the value it's bound too won't be deleted from payload.

Attribute	Hidden from Screen	Validation not applied	Value deleted
visible = false	X
enabled = false		X
ignore = true	X	X	X

Extra attributes

These are component specific attributes, usually found in the extraSettings property.
e.g. extraSettings.minLength, extraSettings.url, ...
These will be explained in detail for each component.