---
description: Description here
---

# Custom Radio & Checkbox

## Usage & Examples:

#### Radio Example:

```markup
<!-- Radio -->
<input class="j-radio" type="radio" name="name">

<!-- radio + label -->
<label class="j-radio-label">
    <input type="radio" name="radio1" id="radio1"> Label + Radio
</label>

<!-- Radio Group -->
<div class="j-radio-group">
    <label>
        <input type="radio" name="radio1" id="radio1"> Group + Label + Radio
    </label>
    <label>
        <input type="radio" name="radio1" id="radio2"> Group + Label + Radio
    </label>
</div>
```

<div align="left"><img src="https://2452656883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrrBGNn_AjovNzJMTtn%2F-Lrw_MsD1whg6FXT7Akw%2F-LrwidUI3xrpREPQXtq3%2FScreenshot%202019-10-24%20at%201.44.47%20PM.png?alt=media&#x26;token=856552ce-70d2-4f4a-920b-b16270134ac3" alt=""></div>

#### Checkbox Example

```markup
<!-- Checkbox -->
<input class="j-checkbox" type="checkbox" name="name">

<!-- Checkbox + label -->
<label class="j-checkbox-label">
    <input type="checkbox" name="check1" id="check2"> Label + Checkbox
</label>

<!-- Checkbox Group -->
<div class="j-checkbox-group">
    <label>
        <input type="checkbox" name="checkbox1" id="checkbox1"> Group + Label + checkbox
    </label>
    <label>
        <input type="checkbox" name="checkbox2" id="checkbox2"> Group + Label + checkbox
    </label>
</div>
```

<div align="left"><img src="https://2452656883-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LrrBGNn_AjovNzJMTtn%2F-Lrw_MsD1whg6FXT7Akw%2F-LrworEuRR_RgecDRHFL%2FScreenshot%202019-10-24%20at%201.44.55%20PM.png?alt=media&#x26;token=cf5855c9-bc0e-4076-b202-80e326b31db5" alt=""></div>
