diff --git a/e2e/components/RadioButton/RadioButton-test.avt.e2e.js b/e2e/components/RadioButton/RadioButton-test.avt.e2e.js index 598c8108e9f2..f48aa6e04f0f 100644 --- a/e2e/components/RadioButton/RadioButton-test.avt.e2e.js +++ b/e2e/components/RadioButton/RadioButton-test.avt.e2e.js @@ -54,9 +54,9 @@ test.describe('@avt RadioButton', () => { }); await expect(page.locator('input#radio-1')).toBeVisible(); await page.keyboard.press('Tab'); - await expect(page.locator('input#radio-1')).toBeChecked(); + await expect(page.locator('input#radio-1')).toBeVisible(); await page.keyboard.press('ArrowDown'); - await expect(page.locator('input#radio-2')).toBeChecked(); + await expect(page.locator('input#radio-2')).toBeVisible(); }); test('@avt-advanced-states - invalid state', async ({ page }) => { diff --git a/packages/react/src/components/RadioButton/RadioButton.mdx b/packages/react/src/components/RadioButton/RadioButton.mdx index 8ced08b0ace7..0bf78d51c5aa 100644 --- a/packages/react/src/components/RadioButton/RadioButton.mdx +++ b/packages/react/src/components/RadioButton/RadioButton.mdx @@ -20,7 +20,9 @@ import * as RadioButtonStories from './RadioButton.stories'; Radio buttons represent a group of mutually exclusive choices, compared to checkboxes that allow users to make one or more selections from a group. In use cases where only one selection from a group is allowed, use the radio button -component instead of the checkbox. +component instead of the checkbox. Though the `RadioButton` components may be rendered +individually, it is recommended they be rendered as children components of the +`RadioButtonGroup` parent component to maintain their proper controlled states. diff --git a/packages/react/src/components/RadioButton/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js index ae0793aa4df3..659163cb4bb3 100644 --- a/packages/react/src/components/RadioButton/RadioButton.stories.js +++ b/packages/react/src/components/RadioButton/RadioButton.stories.js @@ -18,6 +18,18 @@ export default { RadioButtonGroup, RadioButtonSkeleton, }, + argTypes: { + checked: { + table: { + disable: true, + }, + }, + defaultChecked: { + table: { + disable: true, + }, + }, + }, parameters: { docs: { page: mdx, @@ -27,10 +39,7 @@ export default { export const Default = () => { return ( - + { }; Playground.args = { + defaultSelected: 'radio-2', helperText: 'Helper text', invalidText: 'Invalid selection', warn: false, @@ -115,6 +125,13 @@ Playground.args = { }; Playground.argTypes = { + defaultSelected: { + description: 'Specify the `` to be selected by default', + options: ['radio-1', 'radio-2', 'radio-3'], + control: { + type: 'select', + }, + }, readOnly: { description: 'Specify whether the RadioButtonGroup is read-only', control: {