diff --git a/pages/radio-group/progressive-disclosure.page.tsx b/pages/radio-group/progressive-disclosure.page.tsx new file mode 100644 index 0000000000..e94ef53c28 --- /dev/null +++ b/pages/radio-group/progressive-disclosure.page.tsx @@ -0,0 +1,57 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useState } from 'react'; +import Box from '~components/box'; +import FormField from '~components/form-field'; +import RadioGroup from '~components/radio-group'; +import Select, { SelectProps } from '~components/select'; + +const langOptions: Array = [ + { value: 'en-US', label: 'English (United States)' }, + { value: 'en-GB', label: 'English (United Kingdom)' }, + { value: 'de-DE', label: 'Deutsch (Deutschland)' }, + { value: 'de-CH', label: 'Deutsch (Schweiz)' }, +]; + +export default function RadiosPage() { + const [radioSelection, setRadioSelection] = useState(''); + const [lang, setLang] = useState(langOptions[0]); + + return ( + +

Radio group progressive disclosure demo

+ + setRadioSelection(event.detail.value)} + ariaControls="language-settings" + items={[ + { + label: 'Specific language', + value: 'specific', + description: + 'If you know the language spoken in the source media, choose this option for optimal results.', + }, + { + label: 'Automatic language detection', + value: 'automatic', + description: 'If you do not know the language spoken in the source media, choose this option.', + }, + ]} + /> + + + +