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

Form elements module of Tiller Design System

import * as React from "react";
import { ComponentTokens } from "@tiller-ds/theme";
declare type CheckboxColor = "primary" | "secondary" | "tertiary" | "info" | "danger" | "warning" | "success" | "white";
export declare type CheckboxProps = {
    /**
     * The color of the checkbox (CheckboxColor type).
     */
    color?: CheckboxColor;
    /**
     * The label written on the right side of the checkbox (not exclusively text).
     */
    label?: 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;
    /**
     * A unique identifier for testing purposes.
     * This identifier can be used in testing frameworks like Jest or Cypress to locate specific elements for testing.
     * It helps ensure that UI components are behaving as expected across different scenarios.
     * @type {string}
     * @example
     * // Usage:
     * <MyComponent data-testid="my-component" />
     * // In tests:
     * getByTestId('my-component');
     */
    "data-testid"?: string;
} & Omit<React.HTMLProps<HTMLInputElement>, "label"> & CheckboxTokensProps;
declare type CheckboxTokensProps = {
    checkboxTokens?: ComponentTokens<"Checkbox">;
};
export default function Checkbox({ id, label, color, className, ...props }: CheckboxProps): JSX.Element;
export {};