@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
63 lines (62 loc) • 1.87 kB
TypeScript
import { ComponentProps, ReactNode } from 'react';
export interface CheckboxOption<T extends string | number = string> {
/**
* Label to display next to the checkbox.
* Can be a string or a ReactNode for more complex labels.
*/
label: ReactNode;
/**
* Value associated with this checkbox option.
*/
value: T;
/**
* Whether this option is disabled.
*/
disabled?: boolean;
}
export interface CheckboxGroupProps<T extends string | number = string> extends Omit<ComponentProps<"div">, "defaultValue" | "onChange"> {
/**
* Options to render as checkboxes.
*/
options: Array<CheckboxOption<T>>;
/**
* Currently selected values.
*/
value?: T[];
/**
* Callback fired when the values change.
*/
onChange?: (values: T[]) => void;
/**
* Default values to be selected initially for uncontrolled usage.
*/
defaultValue?: T[];
/**
* Direction of the checkbox group.
*
* - `row`: Arranges checkbox horizontally in a row with wrapping if necessary
* - `column`: Arranges checkbox vertically in a column
*
* @default "column"
*/
direction?: "row" | "column";
}
/**
* A group of checkboxes for selecting multiple options.
*
* @template T The type of the value (string or number, supports enum)
*
* @example
* ```tsx
* <CheckboxGroup
* options={[
* { label: "Option 1", value: "option1" },
* { label: "Option 2", value: "option2" },
* { label: "Option 3", value: "option3" },
* ]}
* defaultValue={["option1"]}
* onChange={(values) => console.log(values)}
* />
* ```
*/
export declare const CheckboxGroup: <T extends string | number>({ options, value: valueProp, onChange, defaultValue, className, direction, ...props }: CheckboxGroupProps<T>) => import("react").JSX.Element;