diff --git a/docs/demo/name.tsx b/docs/demo/name.tsx
new file mode 100644
index 0000000..d62fe30
--- /dev/null
+++ b/docs/demo/name.tsx
@@ -0,0 +1,17 @@
+import Segmented from 'rc-segmented';
+import React from 'react';
+import '../../assets/style.less';
+
+export default function App() {
+ return (
+
+
+ console.log(value, typeof value)}
+ />
+
+
+ );
+}
diff --git a/docs/example.md b/docs/example.md
index 222034d..7570c5e 100644
--- a/docs/example.md
+++ b/docs/example.md
@@ -32,3 +32,7 @@ nav:
## rtl
+
+## name
+
+
diff --git a/src/index.tsx b/src/index.tsx
index 9a9b568..b251c27 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -40,6 +40,7 @@ export interface SegmentedProps
direction?: 'ltr' | 'rtl';
motionName?: string;
vertical?: boolean;
+ name?: string;
}
function getValidTitle(option: SegmentedLabeledOption) {
@@ -78,6 +79,7 @@ const InternalSegmentedOption: React.FC<{
label: React.ReactNode;
title?: string;
value: SegmentedRawOption;
+ name?: string;
onChange: (
e: React.ChangeEvent,
value: SegmentedRawOption,
@@ -90,6 +92,7 @@ const InternalSegmentedOption: React.FC<{
label,
title,
value,
+ name,
onChange,
}) => {
const handleChange = (event: React.ChangeEvent) => {
@@ -106,6 +109,7 @@ const InternalSegmentedOption: React.FC<{
})}
>
(
disabled,
defaultValue,
value,
+ name,
onChange,
className = '',
motionName = 'thumb-motion',
@@ -208,6 +213,7 @@ const Segmented = React.forwardRef(
{segmentedOptions.map((segmentedOption) => (
{
offsetParentSpy.mockRestore();
});
+
+ it('all children should have a name property', () => {
+ const GROUP_NAME = 'GROUP_NAME';
+ const { container } = render(
+ ,
+ );
+
+ container
+ .querySelectorAll('input[type="radio"]')
+ .forEach((el) => {
+ expect(el.name).toEqual(GROUP_NAME);
+ });
+ });
});