35 lines
935 B
TypeScript
35 lines
935 B
TypeScript
|
|
|
|
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
|
|
interface CheckboxProps {
|
|
label: string;
|
|
checked: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function Checkbox({ label, checked, onChange, disabled }: CheckboxProps) {
|
|
return (
|
|
<Box as="label" display="flex" alignItems="center" gap={2} cursor={disabled ? 'not-allowed' : 'pointer'}>
|
|
<Box
|
|
as="input"
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.checked)}
|
|
disabled={disabled}
|
|
w="4"
|
|
h="4"
|
|
bg="bg-deep-graphite"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
rounded="sm"
|
|
className="text-primary-blue focus:ring-primary-blue"
|
|
/>
|
|
<Text size="sm" color={disabled ? 'text-gray-500' : 'text-white'}>{label}</Text>
|
|
</Box>
|
|
);
|
|
}
|