diff --git a/src/components/HSegmentedControl.tsx b/src/components/HSegmentedControl.tsx
index 9147e37..29fe08e 100644
--- a/src/components/HSegmentedControl.tsx
+++ b/src/components/HSegmentedControl.tsx
@@ -5,6 +5,8 @@ import type { Option } from '../models';
 import styles from './HSegmentedControl.module.css';
 
 type HSegmentedControlProps = {
+  name?: string;
+  defaultValue?: Option['value'];
   options?: Option[];
   value?: Option['value'];
   onChange?: (value: Option['value']) => void;
@@ -12,12 +14,19 @@ type HSegmentedControlProps = {
 };
 
 export function HSegmentedControl({
+  name,
+  defaultValue,
   options = [],
   value,
   onChange,
   extendClassName,
 }: HSegmentedControlProps) {
-  const [selected, setSelected] = useState(value ?? options[0].value ?? null);
+  const [selected, setSelected] = useState(
+    value ??
+      defaultValue ??
+      (isMap(options[0]) ? options[0].get('value') : options[0].value) ??
+      null,
+  );
   const [sliderPosition, setSliderPosition] = useState(0);
   const [sliderWidth, setSliderWidth] = useState(0);
   const sliderRef = useRef<HTMLDivElement>(null);
@@ -57,6 +66,7 @@ export function HSegmentedControl({
           />
         )}
       </div>
+      {!isNil(name) && <input type="hidden" name={name} value={selected} />}
     </div>
   );
 }
diff --git a/src/components/VSegmentedControl.tsx b/src/components/VSegmentedControl.tsx
index 32f9a9a..83b56e6 100644
--- a/src/components/VSegmentedControl.tsx
+++ b/src/components/VSegmentedControl.tsx
@@ -5,6 +5,8 @@ import type { Option } from '../models';
 import styles from './VSegmentedControl.module.css';
 
 type VSegmentedControlProps = {
+  name?: string;
+  defaultValue?: Option['value'];
   options?: Option[];
   value?: Option['value'];
   onChange?: (value: Option['value']) => void;
@@ -12,12 +14,19 @@ type VSegmentedControlProps = {
 };
 
 export function VSegmentedControl({
+  name,
+  defaultValue,
   options = [],
   value,
   onChange,
   extendClassName,
 }: VSegmentedControlProps) {
-  const [selected, setSelected] = useState(value ?? options[0].value ?? null);
+  const [selected, setSelected] = useState(
+    value ??
+      defaultValue ??
+      (isMap(options[0]) ? options[0].get('value') : options[0].value) ??
+      null,
+  );
   const [sliderPosition, setSliderPosition] = useState(0);
   const [sliderHeight, setSliderHeight] = useState(0);
   const sliderRef = useRef<HTMLDivElement>(null);
@@ -57,6 +66,7 @@ export function VSegmentedControl({
           />
         )}
       </div>
+      {!isNil(name) && <input type="hidden" name={name} value={selected} />}
     </div>
   );
 }