Use Field elements to add fields to your Style guide forms. For more information, see Creating style guides.

Locating the form field elements¶

To find the Form field elements:

1. Navigate to Site Studio > Style guides
2. Click + Add style guide or Edit an existing style guide
3. Click the + button on the Style guide form builder canvas
4. The sidebar browser will open. Click on the drop-down arrow
5. Select the Fields option.

The Form field elements include:

Group accordion and field group¶

Use the Group accordion and Field group form elements to group fields within your Style guide form into logical sections for style guide manager users. For more information, see Group accordion form element and Field group form element.

Tab container and Tab item¶

Use the Tab container and Tab item to create tabbed Style guide forms. For more information. see Tab container form element and Tab item form element.

Help text¶

Use the Help text form element to add help text to your Style guide form. For more information, see Help text form element.

Input¶

Use the Input form field to add a text input field to your Style guide form. For more information, see Input form element.

Select¶

Use the Select form element to add drop-downs (Selects) to your Style guide form. For more information, see Select form element.

Toggle¶

Use the Toggle form element to add a Toggle field to your Style guide form. For more information, see Toggle form element.

Image uploader¶

Use the Image uploader form element to add an Image upload button to your Style guide form. For more information, see Image uploader form element.

Color picker¶

Use the Color picker form element to add a Color picker and color palette to your Style guide form. For more information, see Color picker form element.

Icon picker¶

Use the Icon picker form element to add an Icon picker to your Style guide form. For more information, see Icon picker form element.

Range slider¶

Use the Range slider form element to add a Range slider field to your Style guide form. For more information, see Range slider form element.

Font picker¶

Use the Font picker form element to add a select list of available fonts to your Style guide form. For more information, see Font picker form element.