Checkbox

Checkboxes are input that allow users to select multiple options from a group of related items.

Installation

Coming soon..

Examples

Default Checkbox

<co-checkbox id="checkbox1" label="Label"></co-checkbox>

Selected Checkbox

<co-checkbox id="checkbox2" checked label="Label"></co-checkbox>

Indeterminate Checkbox

<co-checkbox id="checkbox3" indeterminate label="Label"></co-checkbox>

Disabled Checkbox

<co-checkbox id="checkbox4" disabled label="Label"></co-checkbox>

Required Checkbox

<co-checkbox id="checkbox5" required label="Agree to terms and conditions" name="agreement" value="accepted">
</co-checkbox>

Multiple Checkboxes

<div class="co-d-flex co-flex-column co-row-gap-2">
  <co-checkbox id="checkbox6" label="France"></co-checkbox>
  <co-checkbox id="checkbox7" label="Portugal"></co-checkbox>
  <co-checkbox id="checkbox8" label="Spain"></co-checkbox>
</div>

Properties

Property	Type	Description	Usage
checked	Boolean	Controls the checked state of the checkbox.	checked= true \| false
indeterminate	Boolean	Controls the indeterminate state of the checkbox.	indeterminate= true \| false
disabled	Boolean	Controls the disabled state of the checkbox.	disabled= true \| false
label	String	Label for the checkbox.	label=” Agree to terms and conditions”
required	Boolean	To make the checkbox as required field.	required= true \| false
name	String	The name of the checkbox.	name=”agreement”
value	String	The value of the checkbox.	value=”accepted”