Dropdown Input Component

Introduction

The dropdown component is used for collecting option(s) from a given list. It supports both single and multiple selections. Users can also add to the list by typing their own.

Usually good when the list of options is long or dynamically powered.

Configuration Options

Label

Expected Type: String

An optional label for the input. Can be used to define what the input is for, for the user.

Placeholder

Expected Type: String

An optional placeholder for the input. It's displayed inside the input till the input doesn't have a value.

Hint

Expected Type: String

An optional hint for the input. It's displayed inside a tooltip right next to the label upon hover.

Default Value

Expected Type: String

The default value for the input. This can be used to show initial values to the input that can then be changed by the user.

Disabled

Expected Type: Boolean

This determines whether the input component is editable by the user or not.

Options

Options are shown by this component inside a dropdown that opens on clicking the input. The options can either be pre-defined (static) or can dynamically come from a data point.

Static Options

When you know which options to use, you can predefine them under this section.

To add an option click on the + Option button to add a new option.

Each option has

• Label Expected type: String The text to show in the dropdown.
• Value Expected type: String A unique identifier for use in other components such as to dynamically change this component's value.
• Icon Expected type: String (Icon Name) The icon to use for this option. It's shown next to the label and also when the specific option is selected in the dropdown.
• Hidden Expected type: Boolean Whether this option should be hidden from the user. If enabled, the user will not see this option in the list.
• Disabled Expected type: Boolean Whether this option should be disabled. If enabled, the user will not be able to edit the value of this option.

Dynamic Options

Dynamic options can be used to render the dropdown options dynamically based on some external data.

To add dynamic options, switch over to the dynamic tab under the options configuration. You can then configure it:

• Datasource Expected type: Array | List A list of items for the where each item represents a dropdown option. This can be fetched dynamically through workflows or other components.
• Label Expected type: String The key from the above datasource to use for the label. Each item in the datasource must have this key set.
• Value Expected type: String The key from the above datasource to use for the value. Each item in the datasource must have this key set.
• Icon Expected type: String The key from the above datasource to use for the icon name.
• Hidden Expected type: String The key from the above datasource to use for the hidden property.
• Disabled Expected type: String The key from the above datasource to use for the disabled property.

Triggers

• Change: Triggers whenever the input is changed.
• Focus: Triggers whenever the user focuses on the input.
• Blur: Triggers whenever the user blurs the input.

Validations

You can use the validation builder to add various validations on the input. This can range from the input simply being required to complex regex based validations.

You can read more on how to configure validations here.

Theme Options

• Type: The input theme style (Default | Compact | Alternate)
• Text Align: The input's text alignment. (Number | Pixels)
• Text Color: The input's text color. (String | Hex)
• Label Color: The input's text color. (String | Hex)
• Hint Color: The input's text color. (String | Hex)
• Placeholder Color: The input's placeholder color. (String | Hex)
• Text Size: The input's text size. (Number | Pixels)
• Padding: The input's padding. (Number | Pixels)
• Shadow: The input's shadow. (Shadow)
• Border: The input's border. You can also specify the radius for the edges. (Border)
• Background Color: The input's background color. (String | Hex)