Color picker form element
Use the Color picker form element to add a Color picker and color palette to your Component form. For more information, see Create an editable component.
Always use the Color picker when making a color within your layout an editable field within your Component form. You cannot use a simple text input and ask editors to fill in a Hex value. The color selection within styles requires the color object provided by the color picker.
Locating the color picker form element
To find the Color picker form element:
- Navigate to a component
- Click the + button on the Component form builder
- Within the Fields tab, look for the Color picker form element.
The Color picker 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
- Hide picker tab - Remove the option to select a color from the color picker.
- Colors allowed - Choose to allow all colors, restrict by specific colors, or restrict by color tags.
Default
- Default value (optional) - Select a default color for the Color picker.
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.
