File size: 1,336 Bytes
529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 8b65a0f 529c982 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 'use client';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
export interface CheckboxInputProps {
label: string;
value?: boolean;
defaultValue?: boolean;
onChange: (value: boolean) => void;
className?: string;
disabled?: boolean;
helpText?: string;
required?: boolean;
id?: string;
}
export default function CheckboxInput({
label,
value,
defaultValue = false,
onChange,
className = '',
disabled = false,
helpText,
required = false,
id,
}: CheckboxInputProps) {
const currentValue = value ?? defaultValue;
const inputId = id || `checkbox-${Math.random().toString(36).substring(2, 11)}`;
return (
<div className={`flex items-start space-x-3 ${className}`}>
<Checkbox
id={inputId}
checked={currentValue}
onCheckedChange={onChange}
disabled={disabled}
required={required}
className="mt-0.5"
/>
<div className="grid gap-1.5 leading-none">
<Label htmlFor={inputId} className="text-sm font-medium">
{label}
{required && <span className="text-destructive ml-1">*</span>}
</Label>
{helpText && (
<p className="text-xs text-muted-foreground">
{helpText}
</p>
)}
</div>
</div>
);
} |