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