diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-09 19:14:03 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-09 19:14:03 +0200 |
| commit | af575907c254d3233c3fd5904afc87c1db0bdcf3 (patch) | |
| tree | 3118688cb3a64c0f73637c7fbb2213edb8d73e7b /src/components/atoms/forms/checkbox.tsx | |
| parent | 0b3146f7278929c4d1b33dd8f94f34e351e5e5a9 (diff) | |
chore: add a Checkbox component
Diffstat (limited to 'src/components/atoms/forms/checkbox.tsx')
| -rw-r--r-- | src/components/atoms/forms/checkbox.tsx | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/src/components/atoms/forms/checkbox.tsx b/src/components/atoms/forms/checkbox.tsx new file mode 100644 index 0000000..8babcc8 --- /dev/null +++ b/src/components/atoms/forms/checkbox.tsx @@ -0,0 +1,46 @@ +import { SetStateAction, VFC } from 'react'; + +export type CheckboxProps = { + /** + * One or more ids that refers to the checkbox name. + */ + 'aria-labelledby'?: string; + /** + * Add classnames to the checkbox. + */ + className?: string; + /** + * Checkbox id attribute. + */ + id: string; + /** + * Checkbox name attribute. + */ + name: string; + /** + * Callback function to set checkbox value. + */ + setValue: (value: SetStateAction<boolean>) => void; + /** + * Checkbox value. + */ + value: boolean; +}; + +/** + * Checkbox component + * + * Render a checkbox type input. + */ +const Checkbox: VFC<CheckboxProps> = ({ value, setValue, ...props }) => { + return ( + <input + type="checkbox" + checked={value} + onChange={() => setValue(!value)} + {...props} + /> + ); +}; + +export default Checkbox; |
