@npm.tangocode/tc_ui_components/src/documentation/CheckBox.md

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

## CheckBox ##

### Description ###

  A checkbox component.

### Props ###

1.  __value__ (boolean): Value sets the state of Checkbox and whether it begins checked or not. This will be required to prevent any mistakes when needing the checked value to being true or false.

2.  __id__ (string): The id is required to connect the label and input elements to the checkbox by using their for and id attributes, and also will be used as a prefix identifier for all the html elements of the component.

3.  __onChange__ ((event: any) => void): This allows a callback to be set so that the desired action can be set. This is will also be where the checked attribute of the input can be changed with the callback

4.  __readonly ?__ (boolean): Readonly allows the checkbox to be disabled completely by setting its value to be true. This allows for perameters to be set fow when the checkbox can be used by someone

5.  __styles ?__ (CheckBox.Styles): Allows for custom styles to be set on the checkbox to not be confined to the same look always. The Checkbox has three elements that can be changed and styled

  * CheckBoxContainer: The width/height of the checkbox can be changed here as well as the border

  * CheckBoxInput: The Input is where the size of the Icon is controlled and the where the background color is also changed
  
  * CheckboxLabel: If the width/height or border is changed in the CheckBoxContainer it has to be done in unison with the Label to avoid the checkbox coming out distorted

  ```ts
        styles={{
            CheckBoxContainer?: <styled component>;
            CheckBoxInput?: <styled component>;
            CheckBoxLabel?: <styled component>;          
        }}
```

6. __name ?__ (string): A prefix name for all the html elements of the component

### Usage ###

```jsx
<CheckboxComponent value={false} uniqueID={"123"} onClick={() => {}} />
```

This is the Checkbox with the base styles and with the icon given from the constants

![checkbox_image_1](https://s3.amazonaws.com/tc-ui-components/documentationImages/checkbox1.png)

The Checkbox and Icon can be changed a lot. In the example I was able to change the checkbox color and border-width. I changed the Icon to a completely different one with a diffent color and size

![checkbox_image_1](https://s3.amazonaws.com/tc-ui-components/documentationImages/checkbox2.png)

### Styling ###

All the Components Elements targeted are case-sensitive any incorrect charater will not add the style. You will also not receive an error for the misspelling

```jsx
const style = {
    //This will style the Checkbox border
    CheckBoxContainer: styles.checkBox.CheckBoxContainer.extend`
    border: 4px solid orange;
    border-radius: 50px;
    width: 46px;
    height: 46px;
 `,
    CheckBoxInput: styles.checkBox.CheckBoxInput.extend`
      &:checked + label{
            font-size: 35px;
            color: blue;
      }
    `,
};
<CheckBox id={"4"} onChange={() => {}} value={true} styles={styles} />;
```