import { ReactNode } from 'react';
export interface RadiosProps {
    id: string;
    fieldId: string;
    /** list of option details/values for this set of radio items */
    options: (string | {
        value: string;
        label: ReactNode;
        hint?: ReactNode;
        disabled?: boolean;
        children?: ReactNode;
    })[];
    readonly?: boolean;
    /** the currently selected value */
    value?: string | {
        value: string;
    } | null;
    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
    /** true to return full option data instead of just value */
    returnFullData?: boolean;
    classBlock?: string;
    classModifiers?: string | string[] | null;
    className?: string;
}
export declare const DEFAULT_CLASS = "govuk-radios";
/**
## When to use this component

Use the radios component when users can only select one option from a list.


## When not to use this component

Do not use the radios component if users might need to select more than one
option. In this case, you should use the checkboxes component instead.


## How it works

Radios are grouped together in a `<fieldset>` with a `<legend>` that describes
them, as shown in the examples on this page. This is usually a question, like
‘Where do you live?’.

If you are asking just one question per page as recommended, you can set the
contents of the `<legend>` as the page heading. This is good practice as it
means that users of screen readers will only hear the contents once.

Read more about why and how to set legends as headings.

Always position radios to the left of their labels. This makes them easier to
find, especially for users of screen magnifiers.

Unlike with checkboxes, users can only select one option from a list of radios.
Do not assume that users will know how many options they can select based on the
visual difference between radios and checkboxes alone.

If needed, add a hint explaining this, for example, ‘Select one option’.

Do not pre-select radio options as this makes it more likely that users will:

- not realise they’ve missed a question
- submit the wrong answer

Users cannot go back to having no option selected once they have selected one,
without refreshing their browser window. Therefore, you should include ‘None of
the above’ or ‘I do not know’ if they are valid options.

Order radio options alphabetically by default.

In some cases, it can be helpful to order them from most-to-least common
options. For example, you could order options for ‘Where do you live?’ based on
population size.

However, you should do this with extreme caution as it can reinforce bias in your
service. If in doubt, order alphabetically.

Group radios together in a `<fieldset>` with a `<legend>` that describes them,
as shown in the examples on this page. This is usually a question, like ‘Where
do you live?’.

Keep it simple. If the related question is complicated or has more than one
part, show it on the next page in the process instead.

Do not conditionally reveal questions to inline radios, such as ‘yes’ and ‘no’
options placed next to each other.

Conditionally reveal questions only - do not show or hide anything that is not a
question.


#### Known issues

Users are not always notified when a conditionally revealed question is shown or
hidden. This fails [WCAG 2.1 success criterion 4.1.2 Name, Role, Value].

However, we found that screen reader users did not have difficulty answering a
conditionally revealed question - as long as it’s kept simple. It confused our
test users when we conditionally revealed complicated questions to them.

We’ll keep looking for opportunities to [learn more about how conditionally
revealed questions should be used in services].


#### If nothing is selected and the options are ‘yes’ and ‘no’

Say ‘Select yes if [whatever it is is true]’.
For example, ‘Select yes if Sarah normally lives with you’.


#### If nothing is selected and the question has options in it

Say ‘Select if [whatever it is]’.
For example, ‘Select if you are employed or self-employed’.


#### If nothing is selected and the question does not have options in it

Say ‘Select [whatever it is]’.
For example, ‘Select the day of the week you pay your rent’.


[one question per page]: https://design-system.service.gov.uk/patterns/question-pages/#start-by-asking-one-question-per-page
[why and how to set legends as headings]: https://design-system.service.gov.uk/get-started/labels-legends-headings
[WCAG 2.1 success criterion 4.1.2 Name, Role, Value]: https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
[learn more about how conditionally revealed questions should be used in services]: https://github.com/alphagov/govuk-design-system-backlog/issues/37
 */
export declare const Radios: ({ id, fieldId, readonly, options, value, onChange, returnFullData, classBlock, classModifiers, className, ...attrs }: RadiosProps) => import("react/jsx-runtime").JSX.Element;