@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
44 lines (43 loc) • 1.9 kB
TypeScript
import { InputHTMLAttributes } from 'react';
import { BreakpointCustomizable } from '../../types';
export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
/** Content displayed next to the checkbox. */
label: string;
/**
* Id of the parent DSCheckboxGroup, required when setting a `systemFeedback` and `invalid={true}` on the DSCheckboxGroup.
*/
checkboxGroupId?: string;
/** Controls whether the checkbox is checked.
* @default false
*/
checked?: boolean;
/** Disables the checkbox, preventing user interaction.
* @default false
*/
disabled?: boolean;
/** Hides the checkbox label, can be responsive.
* `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
* @default false
* */
hideLabel?: BreakpointCustomizable<boolean>;
/** Unique id for the checkbox. Needs to be set if systemFeedback is provided */
id?: string;
/** Sets the checkbox to an indeterminate state, distinct from checked or unchecked.
* @default false
*/
indeterminate?: boolean;
/** Marks the checkbox as invalid, typically used for form validation.
* @default false
*/
invalid?: boolean;
/** Defines a system feedback message, shown when `invalid={true}`. */
systemFeedback?: string;
/** Callback function called when the state of the checkbox changes. */
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
/**
* A control element that allows users to make a binary choice. It can either be checked or unchecked.
*
* Design in Figma: [Checkbox](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=1017-2328&t=UBsmFURFENnuYSW1-11)
* */
export declare const DSCheckbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;