These components—Text Input, Selection Group, and Toggle—give you the ability to build forms that your users can interact with.

💡💡💡 Tip 💡💡💡

Form Components should be placed within a Data Zone component where the Data property is set to Form Data Source. The input from the individual elements will then be accessible through the Data Zone and referenced by their unique IDs.

Shared Properties

All Form Components share the following properties in the Settings Panel:

• ID (Settings Panel): Specifies how the data will be named when accessed through its Data Zone. Data for an input will not be accessible until you provide an ID.
• Error (Settings Panel): Use this to indicate that a field has an error state. Field errors can be retrieved by referencing the parent Data Zone and inspecting the error property for each field.

Text Input

This component produces a single-line or multiline text input field.

Appearance Properties

• Placeholder Text Color (Appearance Panel - Other): Controls the color of the optional placeholder text displayed before a user enters text.

Settings Properties

• Auto Capitalize (Settings Panel): Specifies whether the user’s input should be auto-capitalized.
• • Sentences: The first letter of every sentence will be capitalized.
  • Characters: Every character will be capitalized (uppercase).
  • None: No auto-capitalization will be performed (recommended for email and password fields).
  • Words: The first letter of every word will be capitalized.
• Auto Complete (Settings Panel): Optionally provides context to the user’s browser or operating system about the input type, enabling functionality like address autocomplete. Available options include Off, Email, Postal-code, Cc-number (credit card number), Name, Username, and others.
• Auto Correct (Settings Panel): Instructs the user’s browser or operating system to autocorrect input. This should be disabled for email and password fields.
• Auto Focus (Settings Panel): When enabled, the field will receive focus as soon as it renders on the screen. It is recommended to enable this for the first field of a mandatory form.
• Blur On Submit (Settings Panel): When enabled, the field will blur (lose focus) when the form is submitted.
• Caret Hidden (Settings Panel): Hides the caret (text insert icon).
• Context Menu Hidden (Settings Panel): Disables the default context menu for the input.
• Default Value (Settings Panel): The value that is displayed when the input is first rendered. This is distinct from the Placeholder.
• Input Mode (Settings Panel): Optional modes that suggest the type of data expected, typically used to determine the keyboard type and may perform data validation. Options include None, Decimal, Email, Numeric, Tel (telephone), and URL.
• Keyboard Type (Settings Panel): Instructs the user’s operating system to display a certain type of keyboard. Options include None, Decimal-pad, Email-address, Number-pad, Numeric, and URL.
• Max Length (Settings Panel): Specifies the maximum number of characters that can be typed into the field.
• Multiline (Settings Panel): When enabled, the input accepts multiple lines of text, used for open-text fields.
• Password Rules (Settings Panel): An iOS-only feature to inform the OS of password requirements (refer to Apple’s documentation).
• Placeholder (Settings Panel): Optional text that is displayed when no value is provided. The color is controlled by Placeholder Text Color in the Appearance Panel.
• Readonly (Settings Panel): If enabled, the user cannot edit the input’s contents.
• Return Key Type (Settings Panel): Changes the label on the user’s return key when using an on-screen keyboard. Options include Done, Go, Next, Search, and Send.
• Secure Text Entry (Settings Panel): Hides the user’s input with circles or other characters, typically enabled for passwords or sensitive data.
• Select Text on Focus (Settings Panel): When enabled, the text in the input is automatically selected when the user clicks or tabs into the input field.
• Text Align (Settings Panel): Specifies whether text is left-, center-, or right-aligned.
• Text Context Type (Settings Panel): An iOS-only property similar to Auto Complete that informs the OS of the specific data type, supporting more types than Auto Complete. If both are specified, Text Content Type takes precedence on iOS.

Selection Group

This component lets you build a list of options in which one or more items can be selected, commonly presented as checklists or radio lists.

• Options (Settings Panel): Used to specify the list of items. This can be a static list or derived from available data using the Data Picker.

The SelectionGroup component is a container—you can drag other components into it to design how each item should be displayed. When designing the items, the SelectionGroup zone provides the item's data as well as an isSelected property.

The parent Form Data Zone tracks selected items by their indices (0-indexed, where the first item is index 0).

• Default Selection (Settings Panel): Specifies which item is selected by default. Provide -1 if no item should be selected.
• Mode (Settings Panel): Controls the selection behavior:
• • Single: The user can select only one item at a time (typically a radio list).
  • Multiple: The user can select multiple items at a time (typically a checklist).

Toggle

The Toggle is an input component that can be either on or off, often referred to as a Switch. It renders as the native toggle on iOS and Android, and as a custom-designed toggle on the Web.

• Active Color: Specifies the color of the toggle container when it is enabled.
• Inactive Color: Specifies the color of the toggle container when it is disabled.
• Disable Animation: When enabled, the animation between the toggled and non-toggled state is disabled.
• State: The current state of the toggle, represented as a boolean.