diff --git a/.changeset/sour-starfishes-lick.md b/.changeset/sour-starfishes-lick.md new file mode 100644 index 0000000000..e96166ccf7 --- /dev/null +++ b/.changeset/sour-starfishes-lick.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/radio": patch +--- + +Remove required attribute for Radio with validationBehavior="aria" diff --git a/packages/components/radio/__tests__/radio.test.tsx b/packages/components/radio/__tests__/radio.test.tsx index b89b2b7963..4322e60dd5 100644 --- a/packages/components/radio/__tests__/radio.test.tsx +++ b/packages/components/radio/__tests__/radio.test.tsx @@ -144,7 +144,7 @@ describe("Radio", () => { expect(onFocus).toBeCalled(); }); - it('should work correctly with "isRequired" prop', () => { + it("should have required attribute when isRequired with native validationBehavior", () => { const {getByRole, getAllByRole} = render( Option 1 @@ -161,6 +161,23 @@ describe("Radio", () => { expect(radios[0]).toHaveAttribute("required"); }); + it("should not have required attribute when isRequired with aria validationBehavior", () => { + const {getByRole, getAllByRole} = render( + + Option 1 + Option 2 + , + ); + + const group = getByRole("radiogroup"); + + expect(group).toHaveAttribute("aria-required", "true"); + + const radios = getAllByRole("radio"); + + expect(radios[0]).not.toHaveAttribute("required"); + }); + it("should work correctly with controlled value", () => { const onValueChange = jest.fn(); diff --git a/packages/components/radio/src/use-radio.ts b/packages/components/radio/src/use-radio.ts index 85a6117589..b401b76373 100644 --- a/packages/components/radio/src/use-radio.ts +++ b/packages/components/radio/src/use-radio.ts @@ -219,11 +219,11 @@ export function useRadio(props: UseRadioProps) { (props = {}) => { return { ref: inputRef, - ...mergeProps(props, inputProps, focusProps, {required: isRequired}), + ...mergeProps(props, inputProps, focusProps), onChange: chain(inputProps.onChange, onChange), }; }, - [inputProps, focusProps, isRequired, onChange], + [inputProps, focusProps, onChange], ); const getLabelProps: PropGetter = useCallback(