---
# System prepended metadata

title: Checkboxes (code)
tags: [DS DONE]

---

---
tags: DS DONE
---
https://dsdev.proximus.com/pagesDS/20__Components/Checkboxes__draft/

# Checkboxes (code)

### Create a Checkbox: 

We have 3 types of checkboxes:
a default, a required & a disabled one. Each with differents states.

the `<legend>` and checkboxes must be wrapped into a `<fieldset>` with the class `rs-form-item`.


Each `<input>` must be wrapped with `<div class="rs-checkbox">` container. 

We put ac- prefix (abbreviation for "accessibility") to know that this id has been added for accessibility matter.



### Default Checkbox

![](https://i.imgur.com/XPKMHBs.png)



```htmlmixed=
<fieldset class="rs-form-item">
    <legend>Choose your favourite flavours</legend>
    <div class="rs-checkbox"><input type="checkbox" name="check10" id="ac-check10"><label for="ac-check10">Chocolat</label></div>
    <span class="error" id="ac-error-checkbox10">All check need!</span>
</fieldset>
```

### Required Checkbox
![](https://i.imgur.com/R4ldFkP.png)


```htmlmixed=
<fieldset class="rs-form-item">
    <div class="rs-checkbox"><input type="checkbox" name="check20" id="ac-check20" required><label for="ac-check20">Chocolat</label></div>
    <span class="error" id="ac-error-checkbox20">All check need!</span>
</fieldset>
```

### Disabled Checkbox
![](https://i.imgur.com/Qgky5XQ.png)

```htmlmixed=
<fieldset class="rs-form-item">
    <div class="rs-checkbox"><input type="checkbox" name="check30" id="ac-check30" disabled><label for="ac-check30">Caramel</label></div>
    <span class="error" id="ac-error-checkbox30">All check need!</span>
</fieldset>
```

### Error state Checkbox

To use Zurb Foundation form check javascript, data-abide="ajax" should be added to `<form>` so error class will be added/removed dynamically when needed, for example if `<input>` is required.

![](https://i.imgur.com/E8Fe9iU.png)

```htmlmixed=
<fieldset class="rs-form-item">
    <div class="rs-checkbox error">
    <input type="checkbox" name="check30" id="ac-check30" required><label for="ac-check30">Courgette</label></div>
    <span class="error" id="ac-error-checkbox30">All check need!</span>
</fieldset>
```



### Negative Default Checkbox

if you want to use negative version, 
you need to add class `rs-form-neg` to `<form>` container tag.

![](https://i.imgur.com/DdfiiGu.png)




```htmlmixed=
<form class="rs-form-neg">
    <fieldset class="rs-form-item">
        <legend>Choose your favourite flavours</legend>
        <div class="rs-checkbox"><input type="checkbox" name="check10" id="ac-check10"><label for="ac-check10">Chocolat</label></div>
        <span class="error" id="ac-error-checkbox10">All check need!</span>
    </fieldset>
</form>
```

### Negative Required Checkbox
![](https://i.imgur.com/ONqF3Tu.png)



```htmlmixed=
<fieldset class="rs-form-item">
    <div class="rs-checkbox"><input type="checkbox" name="check20" id="ac-check20" required><label for="ac-check20">Chocolat</label></div>
    <span class="error" id="ac-error-checkbox20">All check need!</span>
</fieldset>
```

### Negative Disabled Checkbox
![](https://i.imgur.com/3RQjsst.png)


```htmlmixed=
<fieldset class="rs-form-item">
    <div class="rs-checkbox"><input type="checkbox" name="check30" id="ac-check30" disabled><label for="ac-check30">Caramel</label></div>
    <span class="error" id="ac-error-checkbox30">All check need!</span>
</fieldset>
```




#### Razor helper
<div style="background-color:yellow;">
TBD
</div>
