diff --git a/demo/FormExamples.jsx b/demo/FormExamples.jsx
index 334de0c..6e6c3ae 100644
--- a/demo/FormExamples.jsx
+++ b/demo/FormExamples.jsx
@@ -369,48 +369,51 @@ export function FormExamples() {
         options={[
           {
             value: {
+              firstValue: 'Title one',
+              secondValue: 1,
+            },
+            label: {
               title: 'Title one',
               subtitle: 'subtitle one',
             },
-            label: (
-              <div>
-                <h5>Title one</h5>
-                <p>Subtitle one</p>
-              </div>
-            ),
           },
           {
             value: {
+              firstValue: 'Title two',
+              secondValue: 2,
+            },
+            label: {
               title: 'Title two',
               subtitle: 'subtitle two',
             },
-            label: (
-              <div>
-                <h5>Title two</h5>
-                <p>Subtitle two</p>
-              </div>
-            ),
           },
           {
             value: {
+              firstValue: 'Title three',
+              secondValue: 3,
+            },
+            label: {
               title: 'Title three',
               subtitle: 'subtitle three',
             },
-            label: (
-              <div>
-                <h5>Title three</h5>
-                <p>Subtitle three</p>
-              </div>
-            ),
           },
         ]}
         help="dropdown help"
         placeholder="Select one value"
         afterChange={() => console.log('afterChange dropdown')}
-        template={(label) => <div>{label}</div>}
+        template={(label, value) => {
+          return value ? (
+            <div>
+              <strong>{label.title ?? '-'}</strong>
+              <p className="m-0">{label.subtitle ?? '-'}</p>
+            </div>
+          ) : (
+            label
+          );
+        }}
         itemClassName="border-bottom"
         childClassName="text-muted"
-        trackBy="title"
+        trackBy="secondValue"
       />
 
       <FormGroupDropdown
diff --git a/src/forms/FormDropdown.jsx b/src/forms/FormDropdown.jsx
index 59cb631..e3959af 100644
--- a/src/forms/FormDropdown.jsx
+++ b/src/forms/FormDropdown.jsx
@@ -57,7 +57,7 @@ export const FormDropdown = ({
   const toggleDropdown = useCallback(() => (isOpen ? close() : open()), [close, isOpen, open]);
 
   useEffect(() => {
-   /* The logic in this effect allows the user to close the dropdown menu when they click outside of the component. */
+    /* The logic in this effect allows the user to close the dropdown menu when they click outside of the component. */
     const pageClickEvent = (e) => {
       if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {
         if (isOpen) {
@@ -92,7 +92,7 @@ export const FormDropdown = ({
           className={formatClasses(['input-group justify-content-between form-control h-auto', childClassName])}
           onClick={toggleDropdown}
         >
-          {selectedItem ? template(selectedItem.label) : <div className="text-muted">{placeholder}</div>}
+          {selectedItem ? template(selectedItem.label, selectedItem.value) : <div className="text-muted">{placeholder}</div>}
           {toggleIcon(isOpen)}
         </div>
       </Dropdown>
diff --git a/src/mixed/Dropdown.jsx b/src/mixed/Dropdown.jsx
index 27cc182..320f1ea 100644
--- a/src/mixed/Dropdown.jsx
+++ b/src/mixed/Dropdown.jsx
@@ -37,7 +37,7 @@ export function Dropdown({
               className={formatClasses(['dropdown-item', isDisabled && 'disabled', itemClassName])}
               onClick={safeClick(onSelect, { value, index, label })}
             >
-              {template(label)}
+              {template(label, value, index)}
             </a>
           ))}
         </div>