49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import classNames from "classnames";
|
|
import { ReactComponent as Checkmark } from "assets/svg/check.svg";
|
|
|
|
export type Props = {
|
|
/**
|
|
* Control the state of checkbox
|
|
*/
|
|
isChecked: boolean;
|
|
/**
|
|
* An Element next to the checkbox
|
|
*/
|
|
children?: React.ReactNode;
|
|
} & Omit<React.HTMLProps<HTMLInputElement>, "type">;
|
|
|
|
const Checkbox = ({ children, className, isChecked, ...props }: Props) => {
|
|
return (
|
|
<label
|
|
className={classNames(
|
|
"flex gap-x-4 flex-nowrap text-base text-black select-none",
|
|
className
|
|
)}
|
|
htmlFor={props.id}
|
|
>
|
|
<div className="w-6 h-6 relative">
|
|
<input
|
|
className="peer appearance-none transition-colors bg-transparent border-2 border-gray-300 w-6 h-6
|
|
rounded checked:bg-blue-500 checked:border-blue-500
|
|
nextOnChecked:opacity-100 hover:border-blue-500
|
|
focus:outline focus:outline-4 focus:outline-blue-300/40 focus:outline-offset-1
|
|
disabled:bg-gray-75 disabled:border-gray-300 "
|
|
type="checkbox"
|
|
checked={isChecked}
|
|
{...props}
|
|
/>
|
|
<div //
|
|
className=" w-4 h-3 leading-[0] absolute top-1.5 left-1 opacity-0
|
|
pointer-events-none focus:pointer-events-auto flex items-center justify-center
|
|
fill-white peer-disabled:fill-gray-500 "
|
|
>
|
|
<Checkmark className="fill-inherit" />
|
|
</div>
|
|
</div>
|
|
{children}
|
|
</label>
|
|
);
|
|
};
|
|
export default Checkbox;
|