38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import React, { InputHTMLAttributes, forwardRef } from "react";
|
|
import classNames from "classnames";
|
|
import { Field, FieldProps } from ":/components/Forms/Field";
|
|
|
|
export type SwitchProps = InputHTMLAttributes<HTMLInputElement> &
|
|
FieldProps & {
|
|
label?: string;
|
|
labelSide?: "left" | "right";
|
|
};
|
|
|
|
export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
|
|
({ label, labelSide = "left", ...props }: SwitchProps, ref) => {
|
|
return (
|
|
<label
|
|
className={classNames(
|
|
"c__checkbox",
|
|
"c__switch",
|
|
"c__switch--" + labelSide,
|
|
{
|
|
"c__checkbox--disabled": props.disabled,
|
|
"c__switch--full-width": props.fullWidth,
|
|
},
|
|
)}
|
|
>
|
|
<Field compact={true} {...props}>
|
|
<div className="c__checkbox__container">
|
|
{label && <div className="c__checkbox__label">{label}</div>}
|
|
<div className="c__switch__rail__wrapper">
|
|
<input type="checkbox" {...props} ref={ref} />
|
|
<div className="c__switch__rail" />
|
|
</div>
|
|
</div>
|
|
</Field>
|
|
</label>
|
|
);
|
|
},
|
|
);
|