51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { ChangeEvent, forwardRef } from 'react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
|
|
export interface CheckboxProps {
|
|
label: string;
|
|
checked: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
disabled?: boolean;
|
|
error?: string;
|
|
}
|
|
|
|
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({
|
|
label,
|
|
checked,
|
|
onChange,
|
|
disabled = false,
|
|
error
|
|
}, ref) => {
|
|
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
onChange(e.target.checked);
|
|
};
|
|
|
|
return (
|
|
<Box>
|
|
<Box as="label" display="flex" alignItems="center" gap={2} style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}>
|
|
<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)]"
|
|
/>
|
|
<Text size="sm" variant={disabled ? 'low' : 'high'}>
|
|
{label}
|
|
</Text>
|
|
</Box>
|
|
{error && (
|
|
<Box marginTop={1}>
|
|
<Text size="xs" variant="critical">
|
|
{error}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
Checkbox.displayName = 'Checkbox';
|