cal.pub0.org/apps/web/components/ui/form/CheckboxField.tsx

69 lines
2.1 KiB
TypeScript
Raw Normal View History

import type { InputHTMLAttributes } from "react";
import React, { forwardRef } from "react";
import classNames from "@calcom/lib/classNames";
import InfoBadge from "@components/ui/InfoBadge";
type Props = InputHTMLAttributes<HTMLInputElement> & {
label?: React.ReactNode;
description: string;
descriptionAsLabel?: boolean;
informationIconText?: string;
};
const CheckboxField = forwardRef<HTMLInputElement, Props>(
({ label, description, informationIconText, ...rest }, ref) => {
const descriptionAsLabel = !label || rest.descriptionAsLabel;
return (
<div className="block items-center sm:flex">
{label && (
<div className="min-w-48 mb-4 sm:mb-0">
{React.createElement(
descriptionAsLabel ? "div" : "label",
{
2023-01-12 16:57:43 +00:00
className: "flex text-sm font-medium text-gray-700",
...(!descriptionAsLabel
? {
htmlFor: rest.id,
}
: {}),
},
label
)}
</div>
)}
<div className="w-full">
<div className="relative flex items-start">
{React.createElement(
descriptionAsLabel ? "label" : "div",
{
className: classNames(
"relative flex items-start",
2023-01-12 16:57:43 +00:00
descriptionAsLabel ? "text-gray-700" : "text-gray-900"
),
},
<>
<div className="flex h-5 items-center">
<input
{...rest}
ref={ref}
type="checkbox"
className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
/>
</div>
<span className="text-sm ltr:ml-3 rtl:mr-3">{description}</span>
</>
)}
2022-07-13 21:14:16 +00:00
{informationIconText && <InfoBadge content={informationIconText} />}
</div>
</div>
</div>
);
}
);
CheckboxField.displayName = "CheckboxField";
export default CheckboxField;