45 lines
1.4 KiB
TypeScript
Executable File
45 lines
1.4 KiB
TypeScript
Executable File
import React from "react";
|
|
import classNames from "classnames";
|
|
import { ReactComponent as Checkmark } from "../assets/svg/arrow-down.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="h-2 w-2 absolute top-0 left-0">
|
|
<Checkmark className="h-6 w-6 fill-white hover:fill-white stroke-white" />
|
|
</div>
|
|
</div>
|
|
{children}
|
|
</label>
|
|
);
|
|
};
|
|
export default Checkbox;
|