42 lines
1.3 KiB
TypeScript
Executable File
42 lines
1.3 KiB
TypeScript
Executable File
import classNames from "classnames";
|
|
import React from "react";
|
|
import { ReactComponent as Checkmark } from "assets/svg/check.svg";
|
|
|
|
export type Props = {
|
|
/**
|
|
* An Element next to the Radio
|
|
*/
|
|
children?: React.ReactNode;
|
|
} & Omit<React.HTMLProps<HTMLInputElement>, "type">;
|
|
|
|
const Radio = ({ children, className, ...props }: Props) => {
|
|
return (
|
|
<label
|
|
className={classNames(
|
|
" group inline-flex gap-x-4 text-base select-none",
|
|
className
|
|
)}
|
|
htmlFor={props.id}
|
|
>
|
|
<input className="hidden peer" type="radio" {...props} />
|
|
<div
|
|
className=" w-6 h-6 rounded-full box-border p-0.5 border-2 border-gray-300
|
|
peer-checked:border-blue-500
|
|
group-hover:border-blue-500
|
|
|
|
transition-all
|
|
|
|
after:content-[''] after:w-full after:h-full after:block after:bg-blue-500
|
|
after:rounded-full after:scale-0 after:peer-checked:scale-100 duration-200
|
|
|
|
peer-disabled:border-gray-300 peer-disabled:bg-gray-75/5
|
|
after:peer-disabled:bg-[#8C8C8C]
|
|
|
|
hover:border-blue-500"
|
|
></div>
|
|
{children}
|
|
</label>
|
|
);
|
|
};
|
|
export default Radio;
|