import { CheckboxOption } from './Checkbox';
type CheckboxChangeEvent<V> = {
    target: {
        name: string;
        value: V[] | null;
    };
};
type FullData = {
    returnFullData: true;
    value?: CheckboxOption[] | null | undefined;
};
type StringData = {
    returnFullData?: false;
    value?: string[] | null | undefined;
};
export type CheckboxesProps = {
    id: string;
    fieldId: string;
    onChange?: ((value: CheckboxChangeEvent<CheckboxOption | string>) => void) | undefined;
    /** list of options */
    options: (CheckboxOption | string)[];
    readonly?: boolean;
    useValueReadonly?: boolean;
    classBlock?: string;
    classModifiers?: string | string[] | null;
    className?: string;
} & (FullData | StringData);
export declare const DEFAULT_CLASS = "govuk-checkboxes";
/**
 *
## When to use this component

Use the checkboxes component when you need to help users:

- select multiple options from a list
- toggle a single option on or off

## When not to use this component

Do not use the checkboxes component if users can only choose one option from a selection. In this case, use the radios component.

## How it works

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

Unlike with radios, users can select multiple options from a list of checkboxes. 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 all that apply'.

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

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

Order checkbox 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 'What is your nationality?' based on population size.

Group checkboxes together in a <fieldset/> with a <legend/> that describes them, as shown in the examples on this page. This is usually a question, like 'How would you like to be contacted?'.

### If you’re asking one question on the page

If you’re 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].

[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
[asking multiple questions on question pages]: https://design-system.service.gov.uk/patterns/question-pages/#asking-multiple-questions-on-a-page

*/
export declare const Checkboxes: ({ classBlock, classModifiers, className, onChange, readonly, returnFullData, value, useValueReadonly, id, fieldId, options, ...attrs }: CheckboxesProps) => import("react/jsx-runtime").JSX.Element;
export {};