calcom/components/ui/form/CheckboxField.tsx
Peer Richelsen 8bb3e9c0be
RTL (right-to-left) layout (#1654)
* added rtl to body

* added locale checkker in _document.tsx to check for ar or he locale

* added rtl modifiers for event-types

* added rtl classes

* wip

* wip

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2022-02-01 22:17:37 +00:00

37 lines
1.1 KiB
TypeScript

import React, { forwardRef, InputHTMLAttributes } from "react";
type Props = InputHTMLAttributes<HTMLInputElement> & {
label: React.ReactNode;
description: string;
};
const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description, ...rest }, ref) => {
return (
<div className="items-center block sm:flex">
<div className="mb-4 min-w-48 sm:mb-0">
<label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
{label}
</label>
</div>
<div className="w-full">
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
{...rest}
ref={ref}
type="checkbox"
className="w-4 h-4 border-gray-300 rounded focus:ring-primary-500 text-primary-600"
/>
</div>
<div className="ltr:ml-3 rtl:mr-3 text-sm">
<p className="text-neutral-900">{description}</p>
</div>
</div>
</div>
</div>
);
});
CheckboxField.displayName = "CheckboxField";
export default CheckboxField;