native-base/lib/typescript/components/primitives/Radio/types.d.ts

Essential cross-platform UI components for React Native

import type { IStackProps } from '../../primitives/Stack';
import type { InterfaceBoxProps } from '../../primitives/Box/types';
import type { IFormControlContext } from '../../composites';
import type { AccessibilityRole } from 'react-native';
import type { RadioGroupState } from '@react-stately/radio';
import type { MutableRefObject } from 'react';
import type { ResponsiveValue } from '../../../components/types';
import type { ISizes } from '../../../theme/base/sizes';
export declare type IRadioValue = string;
import type { CustomProps, ThemeComponentSizeType } from '../../types';
import type { IIconProps } from '../Icon';
import type { ColorSchemeType } from '../../../components/types';
export declare type IRadioGroupOnChangeHandler = (value: IRadioValue) => any;
export interface InterfaceRadioProps extends InterfaceBoxProps<IRadioProps> {
    /**
     * The value to be used in the radio input. This is the value that will be returned on form submission
     */
    value: IRadioValue;
    /**
     * The color of the radio. This should be one of the color keys in the theme (e.g."green", "red").
     * @default 'primary'
     */
    colorScheme?: ColorSchemeType & ResponsiveValue<'default'>;
    /**
     * 	If true, the radio will be disabled
     */
    isDisabled?: boolean;
    /**
     * 	If true, the radio will be hovered
     */
    isHovered?: boolean;
    /**
     * 	If true, the radio will be pressed
     */
    isPressed?: boolean;
    /**
     * 	If true, the radio will be focused
     */
    isFocused?: boolean;
    /**
     * 	If true, the radio focus ring will be visible
     */
    isFocusVisible?: boolean;
    /**
     * If true, the radio is marked as invalid. Changes style of unchecked state.
     */
    isInvalid?: boolean;
    /**
     * 	The size (width and height) of the radio.
     */
    size?: ThemeComponentSizeType<'Radio'>;
    /**
     * If given, will use this icon instead of the default.
     */
    icon?: JSX.Element;
    /**
     * Ref to be passed to Icon's wrapper Box
     */
    wrapperRef?: any;
    /**
     * Props to be passed to the Stack used inside.
     */
    _stack?: Partial<IStackProps>;
    /**
     * Passed props wilICheckboxGroupProps will be applied on the disabled state.
     */
    _disabled?: Omit<Partial<IRadioProps>, '_disabled'>;
    /**
     * Passed props will be applied on checked state.
     */
    _checked?: Omit<Partial<IRadioProps>, '_checked'>;
    /**
     * Passed props will be applied on focus state.
     */
    _focus?: Omit<Partial<IRadioProps>, '_focus'>;
    /**
     * Passed props will be applied on hover state.
     */
    _hover?: Omit<Partial<IRadioProps>, '_hover'>;
    /**
     * Passed props will be applied on invalid state.
     */
    _invalid?: Omit<Partial<IRadioProps>, '_invalid'>;
    /**
     * Passed props will be applied on pressed state on native.
     */
    _pressed?: Omit<Partial<IRadioProps>, '_pressed'>;
    /**
     * Icon related props can be passed in _icon.
     */
    _icon?: Partial<IIconProps>;
    /**
     * Passed props will be applied on readonly state.
     */
    _readOnly?: Omit<Partial<IRadioProps>, '_readOnly'>;
    /**
     * You can style interaction box around the checkbox using this.
     */
    _interactionBox?: Omit<Partial<IRadioProps>, '_interactionBox'>;
    ref?: MutableRefObject<any>;
}
export interface IRadioGroupProps extends IStackProps {
    /**
     * The value of the radio group.
     */
    value?: IRadioValue;
    /**
     * The name of the input field in a radio (Useful for form submission).
     */
    name: string;
    /**
     * The initial value of the radio group.
     */
    defaultValue?: IRadioValue;
    /**
     * The color of the radios. This should be one of the color keys in the theme (e.g."green", "red").
     * @default 'primary'
     */
    colorScheme?: ColorSchemeType;
    /**
     * 	The size (width and height) of the radio.
     */
    size?: ResponsiveValue<ISizes | (string & {}) | number>;
    /**
     *
     */
    /**
     * The callback fired when any children radio is checked or unchecked.
     */
    onChange?: IRadioGroupOnChangeHandler;
    /**
     * Pass props will be passed to each radio.
     */
    _radio?: Partial<IRadioProps>;
}
export interface IRadioContext extends IFormControlContext {
    colorScheme?: ColorSchemeType;
    size?: ResponsiveValue<ISizes | (string & {}) | number>;
    state: RadioGroupState;
}
export declare type IUseRadioGroupReturnType = {
    radioGroupProps: {
        accessibilityRole: AccessibilityRole;
        onChange: (value: IRadioValue) => any;
        value: IRadioValue;
        name: string;
    };
};
export declare type IRadioComponentType = ((props: IRadioProps) => JSX.Element) & {
    Group: React.MemoExoticComponent<(props: IRadioGroupProps & {
        ref?: MutableRefObject<any>;
    }) => JSX.Element>;
};
export declare type IRadioProps = InterfaceRadioProps & CustomProps<'Radio'>;