git.iko.soy/bridge
on 703ff86 help sign in
bridge/src/indigo-react/components/CheckboxInput.jsx
54 lines 1.2 kB history raw
1import React from 'react';
2import cn from 'classnames';
4import { useField } from 'react-final-form';
5import { Checkbox } from '@tlon/indigo-react';
7export default function CheckboxInput({
8 // visuals
9 name,
10 label,
11 className,
12 style,
13 inline = false,
14 white = false,
16 disabled,
17}) {
18 const {
19 input,
20 meta: { submitting, submitSucceeded },
21 } = useField(name, { type: 'checkbox' });
23 disabled = disabled || submitting || submitSucceeded;
25 return (
26 <div
27 className={cn(className, {
28 mv2: !inline,
29 black: !disabled,
30 gray4: disabled,
31 })}
32 style={{
33 ...(disabled && {
34 pointerEvents: 'none',
35 cursor: 'not-allowed',
36 }),
37 }}>
38 {/* we totally hide the checkbox itself */}
39 <input checkbox className="super-hidden" id={name} {...input} />
40 {/* and then display a prettier one in its stead */}
41 <label
42 style={{
43 display: 'flex',
44 alignItems: 'center',
45 cursor: 'pointer',
46 fontSize: '14px',
47 }}
48 htmlFor={name}>
49 <Checkbox selected={input.checked} style={{ marginRight: '8px' }} />
50 {label}
51 </label>
52 </div>
53 );