forked from cerc-io/snowballtools-base
76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
import * as CheckboxRadix from '@radix-ui/react-checkbox';
|
|
import { type CheckboxProps as CheckboxRadixProps } from '@radix-ui/react-checkbox';
|
|
|
|
import { getCheckboxVariant, type CheckboxVariants } from './Checkbox.theme';
|
|
import { CheckIcon } from 'components/shared/CustomIcon';
|
|
|
|
interface CheckBoxProps extends CheckboxRadixProps, CheckboxVariants {
|
|
/**
|
|
* The label of the checkbox.
|
|
*/
|
|
label?: string;
|
|
/**
|
|
* The description of the checkbox.
|
|
*/
|
|
description?: string;
|
|
}
|
|
|
|
/**
|
|
* Checkbox component is used to allow users to select one or more items from a set.
|
|
* It is a wrapper around the `@radix-ui/react-checkbox` component.
|
|
*
|
|
* It accepts all the props from `@radix-ui/react-checkbox` component and the variants from the theme.
|
|
*
|
|
* It also accepts `label` and `description` props to display the label and description of the checkbox.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <Checkbox
|
|
* id="checkbox"
|
|
* label="Checkbox"
|
|
* description="This is a checkbox"
|
|
* />
|
|
* ```
|
|
*/
|
|
export const Checkbox = ({
|
|
id,
|
|
className,
|
|
label,
|
|
description,
|
|
onCheckedChange,
|
|
...props
|
|
}: CheckBoxProps) => {
|
|
const {
|
|
wrapper: wrapperStyle,
|
|
indicator: indicatorStyle,
|
|
icon: iconStyle,
|
|
input: inputStyle,
|
|
label: labelStyle,
|
|
description: descriptionStyle,
|
|
} = getCheckboxVariant({
|
|
disabled: props?.disabled,
|
|
});
|
|
return (
|
|
<div className={wrapperStyle()}>
|
|
<CheckboxRadix.Root
|
|
{...props}
|
|
className={inputStyle({ className })}
|
|
id={id}
|
|
onCheckedChange={onCheckedChange}
|
|
>
|
|
<CheckboxRadix.Indicator forceMount className={indicatorStyle()}>
|
|
<CheckIcon className={iconStyle()} />
|
|
</CheckboxRadix.Indicator>
|
|
</CheckboxRadix.Root>
|
|
{label && (
|
|
<label className={labelStyle()} htmlFor={id}>
|
|
{label}
|
|
{description && (
|
|
<span className={descriptionStyle()}>{description}</span>
|
|
)}
|
|
</label>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|