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

Form elements module of Tiller Design System

import * as React from "react";
import { ComponentTokens } from "@tiller-ds/theme";
import { CheckboxProps } from "./Checkbox";
import { FieldGroupItemProps, FieldGroupProps } from "./FieldGroup";
declare type Value = Record<string, boolean>;
export declare type CheckboxGroupProps = {
    /**
     * Checkbox Group content (not exclusively text).
     */
    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;
    /**
     * 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 & CheckboxGroupTokensProps;
declare type CheckboxGroupTokensProps = {
    tokens?: ComponentTokens<"CheckboxGroup">;
};
export declare type CheckboxGroupItemProps = {
    /**
     * A string representing the value of the checkbox. This is not displayed on the client-side, but on the server this is the value given to the data submitted with the checkbox's name.
     */
    value: string;
} & Omit<FieldGroupItemProps, "id" | "children" | "data-testid"> & CheckboxProps;
declare function CheckboxGroup({ name, children, value, className, onChange, onBlur, ...props }: CheckboxGroupProps): JSX.Element;
declare namespace CheckboxGroup {
    var Item: typeof CheckboxGroupItem;
}
declare function CheckboxGroupItem({ value, color, disabled, ...props }: CheckboxGroupItemProps): JSX.Element;
export default CheckboxGroup;