Select form element
Use the Select form element to add a select (drop-down) field to your Component form. You can create custom selects or use existing selects from within the elements.
For more information about creating editable components, see Create an editable component.
Locating the select form element
To find the Select form element:
- Navigate to a component
- Click the + button on the Component form builder
- Within the Fields tab, look for the Select form element.
The Select element includes the following fields:
Field name
- Field label - Provide a name for the form element. The field label will be displayed above the field in your component form. Important: It will also be used to auto-generate the field machine name. Auto generation only occurs until you have clicked Apply.
- Machine name - Set the machine name of the field. Used as a token when linking an element to the field. Must be unique within the component. Important: If you need to change the machine name later, click the Edit icon on the field's right.
Field settings
You can either create a Custom select field or use an Existing select from within an Element.
To create a custom select:
- Within Type, choose Custom select field
- Enter a label in the Label field. This is what the end-user will see in the Select.
- Enter a value in the Vaule field. This is the value that will be applied when the user selects the option
- Click + Add option to add additional options to the select.
To use an existing select:
- Within Type, choose Existing select field
- Within Element tab, select the Tab within the Element the select field you require belongs to
- Within Element, select the Element the select field you require belongs to
- Within Field group, select the Field group the select field you require belongs to
- Within Field, select the Select field you require.
You can convert Existing selects into Custom selects. Simply find the select you want using the 'Existing select' process (described above) and then click Custom select. All the values from the Existing select will be populated as Custom select options. You can then add or remove options as you require.
Default
- Option - When you have created your select field they become available within the Option field so you can select a default value.
Visibility
- Show field if - Enter conditional logic to show / hide the field based on the value of another field. For more, see Component fields conditional visibility.
Tooltip
- Tooltip text - Enter tooltip text here.
- Tooltip placement - Define the position of the tooltip on hover of the field.