@tiller-ds/form-elements/RadioGroup.d.ts

Form elements module of Tiller Design System

import * as React from "react";
import { ComponentTokens, TokenProps } from "@tiller-ds/theme";
import { FieldGroupItemProps, FieldGroupProps } from "./FieldGroup";
declare type Value = string | boolean | null;
declare type RadioColor = "primary" | "secondary" | "tertiary" | "info" | "danger" | "warning" | "success" | "white";
export declare type RadioGroupProps = {
    /**
     * Radio Group content (most frequently 'RadioGroup.Item').
     */
    children: React.ReactNode;
    /**
     * Custom classes for the container.
     * Overrides conflicting default styles, if any.
     *
     * The provided `className` is processed using `tailwind-merge` to eliminate redundant or conflicting Tailwind classes.
     */
    className?: string;
    /**
     * Value passed through from validation indicating to display the error on the component.
     */
    error?: string | React.ReactNode;
    /**
     * The accessor value for the input field component (for validation, fetching, etc.).
     */
    name: string;
    /**
     * Function that handles the behaviour of the component once its state changes.
     */
    onChange: (value: Value) => void;
    /**
     * Defines the behaviour of the component once the focus shifts away from the component.
     */
    onBlur?: () => void;
    /**
     * Turns this field into a required field in the form. Only applies visual representation (* next to label),
     * still requires validation on frontend or backend to accompany this value if set to true.
     */
    required?: boolean;
    /**
     * The value of the field sent on submit and/or retrieved on component render. The type of this prop should
     * coincide with the names of your fields. For example, if you have fields 'yes' and 'no', this prop could
     * look like this: {{yes: false, no: false}}
     */
    value: Value;
} & FieldGroupProps & RadioGroupTokensProps;
declare type RadioGroupTokensProps = {
    tokens?: ComponentTokens<"RadioGroup">;
};
export declare type RadioGroupItemProps = {
    /**
     * The color of the radio button (RadioColor type).
     */
    color?: RadioColor;
    disabled?: boolean;
    value: string;
} & Omit<FieldGroupItemProps, "id" | "children"> & TokenProps<"RadioGroup">;
declare function RadioGroup({ name, children, value, className, onChange, onBlur, ...props }: RadioGroupProps): JSX.Element;
declare namespace RadioGroup {
    var Item: typeof RadioGroupItem;
}
declare function RadioGroupItem({ value, disabled, color, className, ...props }: RadioGroupItemProps): JSX.Element;
export default RadioGroup;