# Checkboxes and Radio

Get rid of native look n' feel with our very own custom checkboxes written purely in CSS. These are retina compatible and available in all Bootstrap's contextual classes (ex: `.primary`)

## Checkbox

![](/files/-M2JVzXewaBmLr7vqhCb)

```markup
<div class="form-check">
	<input type="checkbox" id="defaultCheck" checked>
	<label for="defaultCheck">
		Default checkbox
	</label>
</div>
<div class="form-check complete">
	<input type="checkbox" id="checkColorOpt1">
	<label for="checkColorOpt1">
		I agree to the terms and conditions
	</label>
</div>
<div class="form-check primary">
	<input type="checkbox" id="checkColorOpt2" checked>
	<label for="checkColorOpt2">
		Mark as read
	</label>
</div>
```

### **Shape options**

Bored with traditional boxed shape check boxes? Here is a circle one simply add the class `.checkbox-circle` to change it

![](/files/-M2Jj7XkFwl41noX9zo1)

```markup
<div class="form-check checkbox-circle danger">
	<input type="checkbox" id="checkcircleColorOpt1">
	<label for="checkcircleColorOpt1">
		Delete all personal settings
	</label>
</div>
<div class="form-check checkbox-circle complete">
	<input type="checkbox" id="checkcircleColorOpt2" checked>
	<label for="checkcircleColorOpt2">
		Keep me signed in
	</label>
</div>
```

### **State options**

These act the same way as normal HTML check boxes. Here are some states that

![](/files/-M2JjQhIOSNOitvU8aJ6)

```markup
<div class="form-check form-check-inline complete">
	<input type="checkbox" id="checkboxIndeterminate">
	<label for="checkboxIndeterminate">
		Indeterminate
	</label>
</div>
<div class="form-check form-check-inline">
	<input type="checkbox" id="disableCheck" checked disabled>
	<label for="disableCheck">
		Disabled checkbox
	</label>
</div>
```

## **Toggle controls**

Do not delete the `label` element which is placed next to each `radio`. Leave it blank if you don't want it to hold any text

![](/files/-M2JjhfHYjODyx_G20uR)

```markup
<div class="form-check">
	<input type="radio" name="texture" id="defaultradio" value="Default" checked>
	<label for="defaultradio">
		Default
	</label>
</div>
<div class="form-check complete">
	<input type="radio" name="texture" id="radio1" value="Medium">
	<label for="radio1">
		Medium textures
	</label>
</div>
<div class="form-check primary">
	<input type="radio" name="texture" id="radio2" value="Verbose">
	<label for="radio2">
		Verbose channel
	</label>
</div>
```

### **State options**

Use of different color opacity helps to distinguish between different states such as disable

![](/files/-M2JjzhQvK8URr8Kq4Rd)

```markup
<div class="form-check form-check-inline complete">
	<input type="radio" name="state" id="radioInline" value="Default" checked>
	<label for="radioInline">
		Default
	</label>
</div>
<div class="form-check form-check-inline">
	<input type="radio" name="state" id="radioDisabled" value="disabled" disabled>
	<label for="radioDisabled">
		Disabled
	</label>
</div>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pages.revox.io/form-elements/checkboxes-and-radio.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.