@dnb/eufemia/components/radio/Radio.d.ts

DNB Eufemia Design System UI Library

/**
 * Web Radio Component
 */
import React from 'react';
import RadioGroup from './RadioGroup';
import type { SkeletonShow } from '../Skeleton';
import type { FormStatusBaseProps } from '../FormStatus';
import type { SpacingProps } from '../space/types';
export type RadioLabel = string | React.ReactNode;
export type RadioLabelPosition = 'left' | 'right';
export type RadioSize = 'default' | 'medium' | 'large';
export type RadioSuffix = string | React.ReactNode;
export type RadioChildren = string | React.ReactNode;
export type RadioEvent<E = React.SyntheticEvent> = {
    group?: string;
    checked: boolean;
    value: string;
    event: E;
};
export type RadioChangeEvent = RadioEvent<React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement>>;
export type RadioProps = {
    /**
     * Use either the `label` property or provide a custom one.
     */
    label?: RadioLabel;
    /**
     * Use `true` to make the label only readable by screen readers.
     */
    labelSrOnly?: boolean;
    /**
     * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.
     */
    labelPosition?: RadioLabelPosition;
    /**
     * Determine whether the radio is checked or not. Default will be `false`.
     */
    checked?: boolean;
    disabled?: boolean;
    id?: string;
    element?: React.ElementType;
    /**
     * Use a unique group identifier to define the Radio buttons that belongs together.
     */
    group?: string;
    /**
     * The size of the Radio button. For now there is **medium** (default) and **large**.
     */
    size?: RadioSize;
    suffix?: RadioSuffix;
    /**
     * Defines the `value` as a string. Use it to get the value during the `onChange` event listener callback in the **RadioGroup**.
     */
    value?: string;
    skeleton?: SkeletonShow;
    readOnly?: boolean;
    className?: string;
    children?: RadioChildren;
    onChange?: (event: RadioChangeEvent) => void;
    /**
     * By providing a React.ref we can get the internally used input element (DOM). E.g. `ref={myRef}` by using `React.useRef()`.
     */
    ref?: React.Ref<HTMLInputElement>;
} & Omit<React.HTMLProps<HTMLElement>, 'ref' | 'onChange' | 'label' | 'size' | 'children'> & SpacingProps & FormStatusBaseProps;
declare const parseChecked: (state: string | boolean | null | undefined) => boolean;
/**
 * The radio component is our enhancement of the classic radio button.
 */
declare function RadioInner({ ref: externalRef, ...ownProps }: RadioProps): import("react/jsx-runtime").JSX.Element;
declare const Radio: typeof RadioInner & {
    Group: typeof RadioGroup;
    parseChecked: typeof parseChecked;
};
export default Radio;