@baseplate-dev/ui-components
Version:
Shared UI component library
20 lines • 1.45 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useControllerMerged } from '#src/hooks/use-controller-merged.js';
import { cn } from '#src/utils/index.js';
import { Checkbox } from '../checkbox/checkbox.js';
import { FormControl, FormDescription, FormItem, FormLabel, FormMessage, } from '../form-item/form-item.js';
/**
* Field with label and error states that wraps a Checkbox component.
*/
function CheckboxField({ label, description, error, onChange, value, className, ...props }) {
return (_jsxs(FormItem, { error: error, className: cn('space-y-2', className), children: [_jsxs("div", { className: "flex flex-row items-center", children: [_jsx(FormControl, { children: _jsx(Checkbox, { ...props, onCheckedChange: (checked) => {
onChange?.(checked === true);
}, checked: value }) }), _jsxs("div", { className: "space-y-0.5", children: [_jsx(FormLabel, { className: "cursor-pointer pl-2", children: label }), _jsx(FormDescription, { className: "pl-2", children: description })] })] }), _jsx(FormMessage, {})] }));
}
function CheckboxFieldController({ control, name, ...rest }) {
const { field, fieldState: { error }, } = useControllerMerged({ name, control }, rest);
return _jsx(CheckboxField, { error: error?.message, ...rest, ...field });
}
export { CheckboxField, CheckboxFieldController };
//# sourceMappingURL=checkbox-field.js.map