Breeze - Choice

Choice - Checkbox

<div class="cmt-choice">
	<label>
		<input type="checkbox" name="choice1" value="red" />
		<span class="label"> Red</span>
	</label>
	<label>
		<input type="checkbox" name="choice1" value="blue" />
		<span class="label"> Blue</span>
	</label>
	<label>
		<input type="checkbox" name="choice1" value="green" />
		<span class="label"> Green</span>
	</label>
</div>

Red Blue Green

Choice - Checkbox - Boolean

<div class="cmt-choice cmt-checkbox">
	<label>
		<input type="checkbox" />
		<span class="label"> Boolean 1</span>
		<input type="hidden" name="cb1" value="0" />
	</label>
</div>

<div class="cmt-choice cmt-checkbox">
	<label>
		<input type="checkbox" checked />
		<span class="label"> Boolean 2</span>
		<input type="hidden" name="cb2" value="1" />
	</label>
</div>

Boolean 1

Or

Boolean 2

Choice - Checkbox - Inline

<div class="cmt-choice cmt-choice-inline">
	<label>
		<input type="checkbox" name="choice2" value="red" />
		<span class="label"> Red</span>
	</label>
	<label>
		<input type="checkbox" name="choice2" value="blue" />
		<span class="label"> Blue</span>
	</label>
	<label>
		<input type="checkbox" name="choice2" value="green" />
		<span class="label"> Green</span>
	</label>
</div>

Red Blue Green

Choice - Checkbox - 2 In a Row

<div class="cmt-choice cmt-choice-row-2">
	<label>
		<input type="checkbox" name="choice3" value="red" />
		<span class="label"> Red</span>
	</label>
	<label>
		<input type="checkbox" name="choice3" value="blue" />
		<span class="label"> Blue</span>
	</label>
	<label>
		<input type="checkbox" name="choice3" value="green" />
		<span class="label"> Green</span>
	</label>
	<label>
		<input type="checkbox" name="choice3" value="yellow" />
		<span class="label"> Yellow</span>
	</label>
</div>

Red Blue Green Yellow

Choice - Checkbox - 4 In a Row

<div class="cmt-choice cmt-choice-row-4">
	<label>
		<input type="checkbox" name="choice4" value="red" />
		<span class="label"> Red</span>
	</label>
	<label>
		<input type="checkbox" name="choice4" value="blue" />
		<span class="label"> Blue</span>
	</label>
	<label>
		<input type="checkbox" name="choice4" value="green" />
		<span class="label"> Green</span>
	</label>
	<label>
		<input type="checkbox" name="choice4" value="yellow" />
		<span class="label"> Yellow</span>
	</label>
</div>

Red Blue Green Yellow

Choice - Checkbox - 5 In a Row

<div class="cmt-choice cmt-choice-row-5">
	<label>
		<input type="checkbox" name="choice5" value="red" />
		<span class="label"> Red</span>
	</label>
	<label>
		<input type="checkbox" name="choice5" value="blue" />
		<span class="label"> Blue</span>
	</label>
	<label>
		<input type="checkbox" name="choice5" value="green" />
		<span class="label"> Green</span>
	</label>
	<label>
		<input type="checkbox" name="choice5" value="yellow" />
		<span class="label"> Yellow</span>
	</label>
	<label>
		<input type="checkbox" name="choice5" value="black" />
		<span class="label"> Black</span>
	</label>
</div>

Choice - Checkbox - Velocity

<div class="cmt-choice" cmt-app="app" cmt-controller="controller" cmt-action="action" action="request-url" cmt-keep>
	<label>
		<input type="checkbox" name="choice6" value="red" />
		<span class="label"> Red</span>
	</label>
	<label>
		<input type="radio" name="choice6" value="blue" />
		<span class="label"> Blue</span>
	</label>
	<label>
		<input type="radio" name="choice6" value="green" />
		<span class="label"> Green</span>
	</label>
	<div class="row align align-right">
		<span class="btn btn-medium cmt-click">Update</span>
	</div>
</div>

Red Blue Green

Update

Notes: Provide the valid values of the attributes including cmt-app, cmt-controller, cmt-action, and action to trigger the Velocity Application Request.

Choice - Checkbox - Boolean - Velocity

<div class="cmt-choice cmt-checkbox" cmt-app="app" cmt-controller="controller" cmt-action="action" action="request-url" cmt-keep>
	<label>
		<input class="cmt-change" type="checkbox" />
		<span class="label"> Boolean 1</span>
		<input type="hidden" name="cb3" value="0" />
	</label>
</div>

<div class="cmt-choice cmt-checkbox" cmt-app="app" cmt-controller="controller" cmt-action="action" action="request-url" cmt-keep>
	<label>
		<input class="cmt-change" type="checkbox" checked />
		<span class="label"> Boolean 2</span>
		<input type="hidden" name="cb4" value="1" />
	</label>
</div>

Boolean 1

Or

Boolean 2

Notes: Provide the valid values of the attributes including cmt-app, cmt-controller, cmt-action, and action to trigger the Velocity Application Request.

Choice - Checkbox - Boolean - Velocity - Direct

<div class="cmt-choice cmt-checkbox">
	<label>
		<input type="checkbox" />
		<span class="label"> Boolean 1</span>
		<input class="cmt-data-direct" type="hidden" name="cb5" value="0" data-base="base-url" data-id="model-id" data-key="key" data-type="type" />
	</label>
</div>

<div class="cmt-choice cmt-checkbox">
	<label>
		<input type="checkbox" checked />
		<span class="label"> Boolean 2</span>
		<input class="cmt-data-direct" type="hidden" name="cb6" value="1" data-base="base-url" data-id="model-id" data-key="key" data-type="type" />
	</label>
</div>

Boolean 1

Or

Boolean 2

Notes: Provide the valid values of the attributes including data-base, data-id, data-key, and data-type to trigger the Direct Velocity Request.

The type can be data, attribute, config, or setting.

Choice - Radio Group

<div class="cmt-choice">
	<label>
		<input type="radio" name="choice1" value="1" />
		<span class="label"> Yes</span>
	</label>
	<label>
		<input type="radio" name="choice1" value="0" />
		<span class="label"> No</span>
	</label>
</div>

Yes No

Choice - Radio Group - Default

<div class="cmt-choice">
	<label>
		<input type="radio" name="choice2" value="1" checked />
		<span class="label"> Yes</span>
	</label>
	<label>
		<input type="radio" name="choice2" value="0" />
		<span class="label"> No</span>
	</label>
</div>

Yes No

Choice - Radio Group - Inline

<div class="cmt-choice cmt-choice-inline">
	<label>
		<input type="radio" name="choice3" value="1" />
		<span class="label"> Yes</span>
	</label>
	<label>
		<input type="radio" name="choice3" value="0" />
		<span class="label"> No</span>
	</label>
</div>

Yes No

Choice - Radio Group - 4 In a Row

<div class="cmt-choice cmt-choice-inline">
	<label>
		<input type="radio" name="choice4" value="red" />
		<span class="label"> Red</span>
	</label>
	<label>
		<input type="radio" name="choice4" value="blue" />
		<span class="label"> Blue</span>
	</label>
	<label>
		<input type="radio" name="choice4" value="green" />
		<span class="label"> Green</span>
	</label>
	<label>
		<input type="radio" name="choice4" value="yellow" />
		<span class="label"> Yellow</span>
	</label>
</div>

Red Blue Green Yellow

Choice - Radio Group - Velocity

<div class="cmt-choice" cmt-app="app" cmt-controller="controller" cmt-action="action" action="request-url" cmt-keep>
	<label>
		<input class="cmt-change" type="radio" name="choice5" value="1" />
		<span class="label"> Yes</span>
	</label>
	<label>
		<input class="cmt-change" type="radio" name="choice5" value="0" />
		<span class="label"> No</span>
	</label>
</div>

Yes No

Notes: Provide the valid values of the attributes including cmt-app, cmt-controller, cmt-action, and action to trigger the Velocity Application Request.