---
title: "Style guide builder form fields"
date: "2019-11-07T14:59:02+00:00"
summary: "Discover how to enhance your Site Studio style guides with a variety of form field elements. Learn to group, organize, and customize your forms for optimal user experience and design flexibility."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/style-guide-builder-form-fields"
id: "d780e7a6-e077-460e-a155-b0ec11825beb"
---

Table of contents will be added

Use Field elements to add fields to your Style guide forms. For more information, see [Creating style guides](/drupal-starter-kits/add-ons/site-studio/creating-style-guides "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.

![b935fe2f-style-guide-builder-fields-v5.7.png](https://acquia.widen.net/content/b83bad46-ff0b-4420-b071-0198816bb936/web/b935fe2f-style-guide-builder-fields-v5.7.png)

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](/drupal-starter-kits/add-ons/site-studio/group-accordion-form-element "Group accordion form element") and [Field group form element](/drupal-starter-kits/add-ons/site-studio/field-group-form-element "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](/drupal-starter-kits/add-ons/site-studio/tab-container-form-element "Tab container form element") and [Tab item form element](/drupal-starter-kits/add-ons/site-studio/tab-item-form-element "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](/drupal-starter-kits/add-ons/site-studio/help-text-form-element "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](/drupal-starter-kits/add-ons/site-studio/input-form-element "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](/drupal-starter-kits/add-ons/site-studio/select-form-element "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](/drupal-starter-kits/add-ons/site-studio/toggle-form-element "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](/drupal-starter-kits/add-ons/site-studio/image-uploader-form-element "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](/drupal-starter-kits/add-ons/site-studio/color-picker-form-element "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](/drupal-starter-kits/add-ons/site-studio/icon-picker-form-element "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](/drupal-starter-kits/add-ons/site-studio/range-slider-form-element "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](/drupal-starter-kits/add-ons/site-studio/font-picker-form-element "Font picker form element").