I came across a requirement from a client that they wanted to show Country and it’s states grouped in a dropownlist. I created a custom grouped dropdown to fit into the scenario. Since this is an extension of dropdownlist, no speak knowledge required.
Let’s get started
Step 1: Create custom dropdown list
Create a custom dropdownlist under
/sitecore/system/Settings/Forms/Field Types/Lists based on Field Type(/sitecore/templates/System/Forms/Field Type) template like below


Step 2: Create a code behind class and razor view
create a code behind class like this in VS project
using System.Collections.Generic; using Sitecore.Data.Items; using Sitecore.Diagnostics; using Sitecore.ExperienceForms.Mvc.Models.Fields; namespace Sitecore.Project.Example.Views.StateDropdown { public class StateDropdown : DropDownListViewModel { protected override void InitItemProperties(Item item) { Assert.ArgumentNotNull(item, nameof(item)); base.InitItemProperties(item); } protected override void UpdateItemFields(Item item) { Assert.ArgumentNotNull(item, nameof(item)); base.UpdateItemFields(item); } public Dictionary<string, Dictionary<string, string>> Regions() { if(string.IsNullOrEmpty(DataSource)) return new Dictionary<string, Dictionary<string, string>>(); Dictionary<string, Dictionary<string, string>> counrtyCollection = new Dictionary<string, Dictionary<string, string>>(); Item item = Context.Database.GetItem(DataSource); var children = item.GetChildren(); foreach (Item child in children) { counrtyCollection.Add(child.Fields["Name"].Value, new Dictionary<string, string>()); foreach (Item desc in child.Children) { counrtyCollection[child.Fields["Name"].Value].Add(desc.Fields["Name"].Value, desc.Fields["Code"].Value); } } return counrtyCollection; } } }
Create a razor view like this and build project
@using Sitecore.ExperienceForms.Mvc.Html @model Sitecore.Project.Example.Views.StateDropdown.StateDropdown @{ var regions = Model.Regions(); } <label for="@Html.IdFor(m => Model.Value)" class="@Model.LabelCssClass">@Html.DisplayTextFor(t => Model.Title)</label> <select id="@Html.IdFor(m => Model.Value)" data-trigger name="@Html.NameFor(m => Model.Value)" class="@Model.CssClass" placeholder="Select Your Work Location" data-sc-tracking="@Model.IsTrackingEnabled" data-sc-field-name="@Model.Name" @Html.GenerateUnobtrusiveValidationAttributes(m => m.Value)> <option placeholder>Select Your Work Location</option> @foreach (var region in regions) { <optGroup data-id="@region.Value" label="@region.Key"> @foreach (var state in region.Value) { <option value="@state.Value">@state.Key</option> } </optGroup> } </select> @Html.ValidationMessageFor(m => Model.Value)
Step 3: Fill out the fields
Fill out the View Path, Model Type and Property Editor(should be Property Editor Settings/DropDown List).

you are now all set to utilize the custom dropdown list in Forms Designer. Don’t forget to publish the field!
Hope this is helpful. Any questions, please leave a comment.
Happy Sitecoring.