diff options
Diffstat (limited to 'src/components/atoms/forms/toggle.tsx')
| -rw-r--r-- | src/components/atoms/forms/toggle.tsx | 86 |
1 files changed, 0 insertions, 86 deletions
diff --git a/src/components/atoms/forms/toggle.tsx b/src/components/atoms/forms/toggle.tsx deleted file mode 100644 index c3bc09d..0000000 --- a/src/components/atoms/forms/toggle.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { ReactNode, VFC } from 'react'; -import Label, { LabelProps } from './label'; -import styles from './toggle.module.scss'; - -export type ToggleChoices = { - /** - * The left part of the toggle field (unchecked). - */ - left: ReactNode; - /** - * The right part of the toggle field (checked). - */ - right: ReactNode; -}; - -export type ToggleProps = { - /** - * The toggle choices. - */ - choices: ToggleChoices; - /** - * The input id. - */ - id: string; - /** - * The toggle label. - */ - label: string; - /** - * Set additional classnames to the label. - */ - labelClassName?: string; - /** - * The label size. - */ - labelSize?: LabelProps['size']; - /** - * The input name. - */ - name: string; - /** - * The toggle value. True if checked. - */ - value: boolean; - /** - * A callback function to update the toggle value. - */ - setValue: (value: boolean) => void; -}; - -/** - * Toggle component - * - * Render a toggle with a label and two choices. - */ -const Toggle: VFC<ToggleProps> = ({ - choices, - id, - label, - labelClassName = '', - labelSize, - name, - setValue, - value, -}) => { - return ( - <> - <input - type="checkbox" - name={name} - id={id} - checked={value} - onChange={() => setValue(!value)} - className={styles.checkbox} - /> - <Label size={labelSize} htmlFor={id} className={styles.label}> - <span className={`${styles.title} ${labelClassName}`}>{label}</span> - {choices.left} - <span className={styles.toggle}></span> - {choices.right} - </Label> - </> - ); -}; - -export default Toggle; |
