@wix/design-system/dist/types/RadioGroup/RadioGroup.types.d.ts

@wix/design-system

import React, { ReactNode } from 'react';
import { RadioProps, RadioSize } from '../Radio';
import { RadioAlignItems } from '../Radio/Radio.types';
export type RadioVAlign = RadioAlignItems;
export type RadioGroupDisplay = 'vertical' | 'horizontal';
export type RadioType = 'default' | 'button';
export type RadioSelectionArea = 'none' | 'hover' | 'always';
export type RadioSelectionAreaSkin = 'filled' | 'outlined';
export type RadioGroupRadioProps = Pick<RadioProps, 'value' | 'dataHook' | 'name' | 'onMouseEnter' | 'onMouseLeave' | 'size' | 'checked' | 'disabled' | 'onChange'> & {
    children?: ReactNode;
    content?: ReactNode;
};
export interface RadioGroupProps {
    /** Lists RadioGroup items. You're recommended to use it with <RadioGroup.Radio/>. */
    children?: React.ReactNode;
    /** Applies a data-hook HTML attribute that can be used in the tests. */
    dataHook?: string;
    /**
     * Specifies a CSS class name to be appended to the component’s root element.
     * @internal
     */
    className?: string;
    /** Defines a callback function which is called every time user selects a different value. */
    onChange?: (value: RadioProps['value']) => void;
    /** Specifies the selected radio value. */
    value?: RadioProps['value'];
    /** Specify the values of the disabled radio buttons. */
    disabledRadios?: RadioProps['value'][];
    /** Controls radio alignment to the label on Y axis. */
    vAlign?: RadioAlignItems;
    /** Disables the entire group. */
    disabled?: RadioProps['disabled'];
    type?: RadioType;
    /** Control options direction. */
    display?: RadioGroupDisplay;
    /** Controls selection area highlight visibility. */
    selectionArea?: RadioSelectionArea;
    /** Sets the design of the selection area. */
    selectionAreaSkin?: RadioSelectionAreaSkin;
    /** Sets the amount of white space around the radio label in pixels. */
    selectionAreaPadding?: React.CSSProperties['padding'];
    /** Controls the distance between options. */
    spacing?: string;
    /** Sets a unique name of a radio group. */
    name?: string;
    /** Makes component full width and divides all available horizontal space into even parts for each radio button. */
    fullWidth?: boolean;
    /** Controls size. */
    size?: RadioSize;
}
//# sourceMappingURL=RadioGroup.types.d.ts.map