-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.js
65 lines (60 loc) · 1.77 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React from 'react'
import { useId } from '@reach/auto-id'
import s from './style.module.css'
import classNames from 'classnames'
/**
* A basic checkbox and label that allow the user to
* control a `<input type="checkbox" />` element.
*/
function CheckboxInput({
label,
theme = { background: 'light' },
field,
form,
className,
}) {
// `field` and `form` props typically come from Formik,
// though you can also provide them without Formik.
// https://jaredpalmer.com/formik/docs/api/field
const error = form.touched[field.name] && form.errors[field.name]
// Label htmlFor relies on an id on the input field, which must be
// unique to prevent collisions between fields or forms on the same page
const inputId = useId()
return (
<div
className={classNames(
s.root,
s[`background-${theme.background}`],
{
[s.hasError]: Boolean(error),
},
className
)}
>
<div className={s.wrapper}>
<span className={s.checkbox}>
{field.value || field.checked ? <SvgrCheckmark /> : null}
<input id={inputId} type="checkbox" {...field} />
</span>
{label && (
<label htmlFor={inputId} className={s.label}>
<span dangerouslySetInnerHTML={{ __html: label }} />
</label>
)}
</div>
{error && <div className={s.errorText}>{error}</div>}
</div>
)
}
const SvgrCheckmark = (props) => (
<svg width={12} height={12} viewBox="0 0 12 12" fill="none" {...props}>
<g id="Check">
<path
id="Vector"
d="M1.91889 5.37109L0.941895 6.51009L5.08989 10.0641L11.0569 2.90409L9.90489 1.94409L4.91189 7.93609L1.91889 5.37109Z"
fill="black"
/>
</g>
</svg>
)
export default CheckboxInput