@base-ui-components/react/esm/switch/root/useSwitchRoot.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
export declare function useSwitchRoot(params: useSwitchRoot.Parameters): useSwitchRoot.ReturnValue;
export declare namespace useSwitchRoot {
    interface Parameters {
        /**
         * The id of the switch element.
         */
        id?: string;
        /**
         * Whether the switch is currently active.
         *
         * To render an uncontrolled switch, use the `defaultChecked` prop instead.
         */
        checked?: boolean;
        /**
         * Whether the switch is initially active.
         *
         * To render a controlled switch, use the `checked` prop instead.
         * @default false
         */
        defaultChecked?: boolean;
        /**
         * Whether the component should ignore user interaction.
         * @default false
         */
        disabled?: boolean;
        /**
         * A React ref to access the hidden `<input>` element.
         */
        inputRef?: React.Ref<HTMLInputElement>;
        /**
         * Identifies the field when a form is submitted.
         */
        name?: string;
        /**
         * Event handler called when the switch is activated or deactivated.
         *
         * @param {boolean} checked The new checked state.
         * @param {Event} event The corresponding event that initiated the change.
         */
        onCheckedChange?: (checked: boolean, event: Event) => void;
        /**
         * Whether the user should be unable to activate or deactivate the switch.
         * @default false
         */
        readOnly?: boolean;
        /**
         * Whether the user must activate the switch before submitting a form.
         * @default false
         */
        required?: boolean;
    }
    interface ReturnValue {
        /**
         * Whether the switch is currently active.
         */
        checked: boolean;
        /**
         * Resolver for the input element's props.
         * @param externalProps Additional props for the input element
         * @returns Props that should be spread on the input element
         */
        getInputProps: (externalProps?: React.ComponentPropsWithRef<'input'>) => React.ComponentPropsWithRef<'input'>;
        /**
         * Resolver for the button element's props.
         * @param externalProps Additional props for the input element
         * @returns Props that should be spread on the button element
         */
        getButtonProps: (externalProps?: React.ComponentPropsWithRef<'button'>) => React.ComponentPropsWithRef<'button'>;
    }
}