This component creates a drop-down list of different options provided. You can only select one option. To add more than one option, click on the Data tab and then click the "Add Another" button. Label data will be displayed to the client, and the value will be saved in the database.
Display Tab:
- Label: You can place the title or name in this component.
- Label Position: In this setting, you can adjust the position of the component name and label.
- Label Width: In this setting, you can adjust the width of the component name and label.
- Label Margin: In this setting, you can adjust the margins of the component name and label.
- Widget Type: This setting you can choose the widget type. There are two options to select from, ChoiceJS and HTML 5.
- Placeholder: In this setting, you can place text that will appear in the field when it's empty.
- Description: In the description field, you can enter text that will appear under the Input field.
- Tooltip: Entering data here will create a tooltip icon on the field.
- Custom CSS Class: In this setting, you can add a CSS class. Multiple classes can be added, and class names should be separated by spaces.
- Tab Index: The Tab Index setting indicates which element in a form can be focused and which cannot. It works as a global attribute and provides 3 different results depending on the integer. A Negative Integer (-1) indicates that the elements are unfocused and unreachable by sequential navigation. Zero Integer (0) indicates that the elements are focused and can be reached with sequential navigation. A Positive Integer (1) functions like the zero integer but allows setting an order depending on the number.
- Hidden: Enabling this setting will hide your field from view when the form is extracted.
- Hide Label: In this component, you can hide the label or name. Sometimes you only need the component field and not the label; hide label is used for that purpose.
- Unique Options: Enabling these settings will show you only the unique option.
- Initial Focus: Enabling this setting can make the field initially focused. Please note that only one field or component can be the initial focus in a form.
- Disabled: Enabling this setting will disable the component in the form.
- Table View: When this setting is enabled, the data on this component will only show up in the Submission list of the tableview.
Data Tab:
- Multiple Values: If you enable this setting, you can add multiple values in the field. By clicking the "Add Another" button, you can add more values, and they will form an array.
- Data Source Type: If you want to show data from another source or URL, select this setting and choose URL or JSON source and provide the URL. For example: Use this setting if you want to show all the states in USA to show up in drop down.
- Default Values: The default value (if given) will be the value in the text field unless the user enters it manually. If you use a default value, you can no longer use placeholder settings.
- Data Source Values: In this setting, you can enter the values for the selectcomponent. In "Values," you can enter the data you want to be submitted in the form. In "Labels," you enter the data that will appear on the form.
- Storage Type: In this setting, you can select the type to store the data. You have five types to choose from: Autotype, String, Number, Boolean, and Object.
- Item Template: In this setting, you can enter the HTML template for data item results.
- Refresh Data On: This setting refreshes the data when another field is changed.
- Clear value on Refresh option: Enabling this option will clear the value when it is refreshed.
- Enable Static Search: Enabling this option will allow the select dropdown to search within the static list provided.
- Search Threshold: In this setting, you can set the search threshold between 0.0 to 1.0, where 0.0 is a perfect match and 1.0 would match anything.
- Read-Only Value: Enabling this option will only show you the value if you are in Read-Only Mode.
- Choices.js Option: In this setting, you can write the Raw JSON object which can be used as an object.
- Persistent: If you enable this setting, your data will not appear in the properties.
- Input Format: With this setting, you can obtain output from this field in 3 different formats: Plain, HTML, and Raw (insecure). You can select your desired format.
- Protected: If you do not want to show the input value in properties when queried by API, you can enable this setting.
- Database Index: If you select this setting, it will create an index within the database, which will improve performance when queries are submitted.
- Encrypted: Encrypt this field on the server. It is two-way encryption and is not appropriate for passwords. This setting is only available on the 'Enterprise' project plan.
- Clear Value When Hidden: As the name suggests, the value of this field will be cleared if the hidden option is selected.
- Calculate Value on Server: As the name suggests, if you select this setting, it will run calculations on your server.
- Allow Manual Override of Calculated Value: As the name suggests, if you select this setting, it will allow you to override the calculated values.
Validation Tab:
- Validate On: Selecting this setting will determine when to allow front-end validation of the component. It provides two options to choose from: Change and Blur.
- Required: Enabling this setting will make this component mandatory, and the user cannot submit the form without filling this component.
- Unique: Enabling this setting will help the user understand that this information has not been provided before while submitting the form.
- Error Label: With this setting, you can enter text that will be displayed when the field displays an error message.
- Custom Error Message: In this setting, you can enter the error message that will be displayed to the user if any error occurs while filling out the form.
API:
- Property Name: In this setting, you can provide the name of the field in the API endpoint.
- Field Tags: Enter tags for the field that can be used in custom logic.
- Custom Properties: Enter any custom properties to configure this component in this setting.
Conditional Tab:
- This component should Display: In this setting, you can choose "True and False" if this component should display.
- When the form component: In this setting, you can choose if you want the component to be displayed after it is submitted.
- Has the value: In this setting, you can choose the value of the component when it will be hidden or displayed.
Logic:
- Advanced Logic:
Layout:
- HTML Attributes: In this setting, you can enter HTML attributes map for component input.
This is how the “Select” component will appear on the form.