@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
45 lines (44 loc) • 1.7 kB
TypeScript
import { KendoComponent } from '../_types/component';
export declare const CHECKBOX_CLASSNAME = "k-checkbox";
declare const states: ("required" | "focus" | "invalid" | "disabled" | "checked" | "valid" | "hover" | "indeterminate")[];
declare const options: {
size: ("small" | "medium" | "large" | undefined)[];
rounded: ("small" | "none" | "medium" | "full" | "large" | undefined)[];
};
export type CheckboxProps = CheckboxOptions & {
id?: string;
/** @aria role override for the wrapper span (e.g., role="none" in Treeview context) */
wrapperRole?: string;
};
export type CheckboxState = {
[K in (typeof states)[number]]?: boolean;
};
export type CheckboxOptions = {
size?: (typeof options.size)[number] | null;
rounded?: (typeof options.rounded)[number] | null;
};
/**
* Checkbox component - native checkbox input element.
*
* @accessibility
* - Uses native `<input type="checkbox">` (role="checkbox" is implicit)
* - Must have accessible name via `<label>`, `aria-label`, or `aria-labelledby`
* - Native `checked` property handles checked state
* - Uses native `disabled` attribute for disabled state
* - Use `aria-invalid="true"` when validation fails
*
* @example
* ```tsx
* // With label element
* <Checkbox id="agree" />
* <label htmlFor="agree">I agree</label>
*
* // With aria-label
* <Checkbox aria-label="Subscribe to newsletter" />
* ```
*
* @wcag 4.1.2 Name, Role, Value - checkbox must have accessible name
* @wcag 1.3.1 Info and Relationships - label must be programmatically associated
*/
export declare const Checkbox: KendoComponent<CheckboxProps & CheckboxState & React.HTMLAttributes<HTMLInputElement>>;
export default Checkbox;