@styleless-ui/react/esm/ToggleGroup/ToggleGroup.d.ts

Completely unstyled, headless and accessible React UI components.

import * as React from "react";
import type { Classes, MergeElementProps } from "../typings";
interface OwnProps {
    /**
     * The content of the group.
     */
    children?: React.ReactNode;
    /**
     * Map of sub-components and their correlated classNames.
     */
    classes?: Classes<"root" | "label" | "group">;
    /**
     * The label of the group.
     */
    label: string | {
        /**
         * The label to use as `aria-label` property.
         */
        screenReaderLabel: string;
    } | {
        /**
         * Identifies the element (or elements) that labels the group.
         *
         * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby MDN Web Docs} for more information.
         */
        labelledBy: string;
    };
    /**
     * The value of the active toggle.
     */
    value?: string | string[];
    /**
     * The default value. Use when the component is not controlled.
     */
    defaultValue?: string | string[];
    /**
     * The Callback is fired when the state changes.
     */
    onChange?: (activeItems: string | string[]) => void;
    /**
     * Determines whether a single or multiple items can be active at a time.
     */
    multiple?: boolean;
    /**
     * If `automatic`, toggles are automatically activated when they receive focus.
     * If `manual`, users activate a toggle by focusing them and pressing `Space` or `Enter`.
     */
    keyboardActivationBehavior?: "manual" | "automatic";
}
export type Props = Omit<MergeElementProps<"div", OwnProps>, "className" | "defaultChecked">;
declare const ToggleGroup: (props: Props, ref: React.Ref<HTMLDivElement>) => JSX.Element;
export default ToggleGroup;