form CheckboxField.tsx

0% Statements 0/8

0% Branches 0/2

0% Functions 0/1

0% Lines 0/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { FC } from "react";
import styled from "styled-components";
import { Checkbox } from "./Checkbox";
import { Label } from "./Label";
 
export interface CheckboxFieldProps {
  readonly name: string;
  readonly label?: string;
  readonly title?: string;
  readonly checked?: boolean;
  readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
 
const Wrapper = styled.div`
  display: flex;
  align-items: center;
  width: 100%;
  height: 28px;
 
  ${Label} {
    margin-left: 5px;
    margin-bottom: 0px;
    margin-top: -1px;
  }
`;
 
export const CheckboxField: FC<CheckboxFieldProps> = ({
  name,
  label,
  title,
  checked,
  onChange,
}) => (
  <Wrapper>
    <Checkbox id={name} name={name} checked={checked} onChange={onChange} />
    {label && (
      <Label htmlFor={name} title={title}>
        {label}
      </Label>
    )}
  </Wrapper>
);