See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.
A member of the Bluemix Design System's team will be in touch within 48 hours.
Your issue, , is now in the bluemix-components repo. Click the issue number to track the progress or make edits to your issue.
We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:
#bluemix-componentselements
Checkboxes are used when there is a list of options and the user may select multiple options, including all or none.
<!--
Checkbox (SVG)
* Available as default in `7.x`
* Uses SVG to create checkmark (bluemix-icons)
* Compatible with all browsers
-->
<!-- input + label -->
<input id='unique-checkbox' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox'>
<label for='unique-checkbox' class='bx--checkbox__label'>
<span class='bx--checkbox__appearance'>
<svg class='bx--checkbox__checkmark'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#support--check-padding'></use>
</svg>
</span>
Checkbox (input + label)
</label>
<!-- label > input -->
<label class='bx--checkbox__label'>
<input class='bx--checkbox bx--checkbox--svg' type='checkbox' value='yellow' name='checkbox'>
<span class='bx--checkbox__appearance'>
<svg class='bx--checkbox__checkmark'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#support--check-padding'></use>
</svg>
</span>
<span class='bx--checkbox__label-text'>Checkbox (label > input)</span>
</label>
<!--
Checkbox (SVG)
* Available as default in `7.x`
* Uses SVG to create checkmark (bluemix-icons)
* Compatible with all browsers
-->
<!-- Disabled Checkbox SVG (input + label) -->
<input disabled id='disabled-checkbox-svg' class='bx--checkbox bx--checkbox--svg' type='checkbox' value='green' name='checkbox'>
<label for='disabled-checkbox-svg' class='bx--checkbox__label'>
<span class='bx--checkbox__appearance'>
<svg class='bx--checkbox__checkmark'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#support--check-padding'></use>
</svg>
</span>
Disabled Checkbox SVG (input + label)
</label>
<!-- Disabled Checkbox SVG (label > input) -->
<label class='bx--checkbox__label'>
<input disabled class='bx--checkbox bx--checkbox--svg' type='checkbox' value='yellow' name='checkbox'>
<span class='bx--checkbox__appearance'>
<svg class='bx--checkbox__checkmark'>
<use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#support--check-padding'></use>
</svg>
</span>
<span class='bx--checkbox__label-text'>Disabled Checkbox SVG (label > input)</span>
</label>