--- title: "Component form field elements" date: "2017-11-13T07:50:17+00:00" summary: "Discover a comprehensive guide to Site Studio's component form field elements. Learn how to enhance your forms with various field types, from basic inputs to advanced features like Google Maps and entity browsers." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/component-form-field-elements" id: "a8caf350-ca26-4356-8db7-710f4d8964ea" --- Table of contents will be added Use Field elements to add fields to your Component forms. For more information, see [Create an editable component](/drupal-starter-kits/add-ons/site-studio/create-component "Create an editable component"). Locating the form field elements -------------------------------- To find the Form field elements: 1. Navigate to Site Studio > Components > **Components** 2. Click **\+ Add component** or **Edit** an existing component 3. Click the **+ button** on the Component form builder canvas 4. The sidebar browser will open. Click on the **drop-down arrow** 5. Select the **Fields** option. ![dfc4892d-sidebar-browser.png](https://acquia.widen.net/content/1f97f545-6292-4ddb-8e09-5ab1373670bb/web/dfc4892d-sidebar-browser.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 Component form into logical sections for website editors 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 Component 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 Component 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 Component form. For more information, see [Input form element](/drupal-starter-kits/add-ons/site-studio/input-form-element "Input form element"). Plain text area --------------- Use the Plain text area form element to add a Plain text area field to your Component form. For more information, see [Plain text area form element](/drupal-starter-kits/add-ons/site-studio/plain-text-area-form-element "Plain text area form element"). WYSIWYG ------- Use the WYSIWYG form element to add a WYSIWYG editor field to your Component form. For more information, see [WYSIWYG form element](/drupal-starter-kits/add-ons/site-studio/wysiwyg-form-element "WYSIWYG form element"). Select ------ Use the Select form element to add drop-downs (Selects) to your Component 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 Component form. For more information, see [Toggle form element](/drupal-starter-kits/add-ons/site-studio/toggle-form-element "Toggle form element"). Link to page ------------ Use the Link to page form element to add an auto complete link field to your Component form. For more information, see [Link to page form element](/drupal-starter-kits/add-ons/site-studio/link-page-form-element "Link to page form element"). Image uploader -------------- Use the Image uploader form element to add a Image upload button to your Component 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 Component 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 Component form. For more information, see [Icon picker form element](/drupal-starter-kits/add-ons/site-studio/icon-picker-form-element "Icon picker form element"). Youtube URL ----------- Use the Youtube URL form element to add a Youtube URL with video preview field to your Component form. For more information, see [Youtube URL form element](/drupal-starter-kits/add-ons/site-studio/youtube-url-form-element "Youtube URL form element"). Video URL --------- Use the Video URL form element to add a Video URL with video preview field to your Component form. For more information, see [Video URL form element](/drupal-starter-kits/add-ons/site-studio/video-url-form-element "Video URL form element"). Google map marker ----------------- Use the Google map marker form element to add a Google map marker location field and map preview to your Component form. For more information, see [Google map marker form element](/drupal-starter-kits/add-ons/site-studio/google-map-marker-form-element "Google map marker form element"). Entity reference ---------------- Use the Entity reference form element to add the option to select an entity type and associated view mode to your Component form. For more information, see [Entity reference form element.](/drupal-starter-kits/add-ons/site-studio/entity-reference-form-element "Entity reference form element") Entity browser -------------- Use the Entity browser form element to add an Entity browser field to your Component form. For more information, see [Entity browser form element](/drupal-starter-kits/add-ons/site-studio/entity-browser-form-element "Entity browser form element"). Range slider ------------ Use the Range slider form element to add a slider to your Component form. . For more information, see [Range slider form element](/drupal-starter-kits/add-ons/site-studio/range-slider-form-element "Range slider form element").