Combobox
The Combobox component allows users to choose one option from a predefined set of choices. It also allows the user to filter through the options by typing in the input.
Example
You can use the Combobox component to show the user a list of countries from which to choose. The user can:
- Open the options list using the chevron icon.
- Type to filter through the options.
Note: The Combobox component follows the WCAG 2.0 AA accessibility guidelines.
Properties
The following Combobox component properties are available:
Main
Property | Description | Required |
---|---|---|
Component ID | Enter a unique name for the component. See Templating in components for more details. | Yes |
Label | Enter the text you want to display above the component. | Yes |
Placeholder | Enter the text you want to display in the field before any option is selected. By default, 'Type to filter...' text is displayed. | No |
Description | Add a description for the component. This is displayed under the label. | No |
Hint | Enter a text under the component to give the user any additional information. Validation messages have priority and will hide the hint temporarily. | No |
Options | Enter the resource to return the data for the component, these will be the Combobox options. You can choose the array from the Templating drop-down displayed when selecting the Plus (+) button (only arrays will be available) or type it in using Liquid. For example {{res1}} Note: You must edit the Resource in the Resources tab. |
No |
Value field | This is the real data associated with the options. Import a value using Liquid from the previously imported array in Options. For example, {{code}} . |
No |
Display field | This is what is visible to the user. Import a value using Liquid from the previously imported array in Options. For example, {{name}} . |
No |
Default value | Enter a value from the Value field if you want this value to appear by default instead of the Placeholder text.Note: If the value is an integer number returned by a Resource, you must add {{}} for it to work. For example: {{1}} . |
No |
Note: See Templating drop-down for more details on rendering dynamic content using Liquid.
Styles
Property | Description | Required |
---|---|---|
Size | Select the size from the drop-down menu. | Yes |
Validation
Property | Description | Required |
---|---|---|
Optional field | Turn on to make the component optional. By default, the component is required. | No |
Add rule | Add rules in Liquid to specify when the component is required. If no rules are set, the component will be required in all instances. See Add rules to trigger properties for more details. | No |
Message | Enter a message to be displayed if the user does not fill in the input. A default message is otherwise shown. | No |
Interactions
Property | Description | Required |
---|---|---|
Hidden | Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel. | No |
Add rule | You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances. | No |
Disabled | Select the checkbox to disable the component in the end-user app. | No |
Add rule | You can set rules to disable the component using Liquid. If no rules are set, the component will be disabled in all instances. | No |
Read only | Select the checkbox to set the component to read-only. | No |
Add rule | You can set rules to prevent the user form editing the component using Liquid. If no rules are set, the component will be read-only in all instances. | No |
Note: See Add rules to trigger properties for more information on setting rules for these properties.
Accessibility
Property | Description | Required |
---|---|---|
Aria label | Enter a text that allows assistive technology to attach a label to the component. | No |
Title | Enter a text that is displayed as a tooltip when hovering the mouse over the component in the end-user app. | No |
Events
The Combobox component supports the On update event. See Events and actions for more details.