31 lines
857 B
TypeScript
31 lines
857 B
TypeScript
import { ChangeEvent, forwardRef } from 'react';
|
|
|
|
export interface SimpleCheckboxProps {
|
|
checked: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export const SimpleCheckbox = forwardRef<HTMLInputElement, SimpleCheckboxProps>(({
|
|
checked,
|
|
onChange,
|
|
disabled = false
|
|
}, ref) => {
|
|
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
onChange(e.target.checked);
|
|
};
|
|
|
|
return (
|
|
<input
|
|
ref={ref}
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={handleChange}
|
|
disabled={disabled}
|
|
className="w-4 h-4 rounded-none border-[var(--ui-color-border-default)] bg-[var(--ui-color-bg-surface)] text-[var(--ui-color-intent-primary)] focus:ring-[var(--ui-color-intent-primary)] cursor-pointer disabled:cursor-not-allowed"
|
|
/>
|
|
);
|
|
});
|
|
|
|
SimpleCheckbox.displayName = 'SimpleCheckbox';
|