Checkbox
Allows users to select one or more options from a defined list. For quick reference, see technical parameters.
Best practices
- Use in forms only.
- Write clear and concise questions.
Example
[Checkbox options="Value 1, Value 2<sup>1</sup>, Value 3, Value 4" inline="true"]Checkbox Component[/Checkbox]
<div class="bocss-checkbox__group bocss-checkbox__flex" role="group" id="bocss-checkbox-2" data-field-name="checkbox-2">
<label class="bocss-label" id="bocss-checkbox-2-label" for="bocss-checkbox-2">Checkbox Component</label>
<div class="bocss-option__group">
<div class="bocss-checkbox__inline">
<input type="checkbox" value="Value 1" id="checkbox-component-3-0" name="checkbox-2[]" class="bocss-checkbox">
<label for="checkbox-component-3-0" class="bocss-checkbox__label" tabIndex="0"
aria-selected="false">Value 1</label>
</div>
<div class="bocss-checkbox__inline">
<input type="checkbox" value="Value 2<sup>1</sup>" id="checkbox-component-3-1" name="checkbox-2[]" class="bocss-checkbox">
<label for="checkbox-component-3-1" class="bocss-checkbox__label" tabIndex="0"
aria-selected="false">Value 2<sup>1</sup></label>
</div>
<div class="bocss-checkbox__inline">
<input type="checkbox" value="Value 3" id="checkbox-component-3-2" name="checkbox-2[]" class="bocss-checkbox">
<label for="checkbox-component-3-2" class="bocss-checkbox__label" tabIndex="0"
aria-selected="false">Value 3</label>
</div>
<div class="bocss-checkbox__inline">
<input type="checkbox" value="Value 4" id="checkbox-component-3-3" name="checkbox-2[]" class="bocss-checkbox">
<label for="checkbox-component-3-3" class="bocss-checkbox__label" tabIndex="0"
aria-selected="false">Value 4</label>
</div>
</div>
</div>
Parameters
Parameter | Values | Description |
---|---|---|
id | user‑specified | HTML id of the field |
inline | true, false | Specifies if the options should be inline |
label | user‑specified | Label of the field. The content enclosed within the shortcode tags populates this fields. |
name | user‑specified | HTML name of the field |
options | user‑specified | Defines the options. Use commas to separate. When used in combination with the “single_checkbox” parameter set the “options” as the HTML value. This value will show up in the data output, not in the form itself. |
required | true, false | Set to “true” to make the field mandatory. |
separator | user‑specified | When commas are part of the content use a special character to separate the options. |
single_checkbox | true, false | Use for standalone checkboxes such as affirmations. When using this parameter a “label” must also be set. The “options” should be the HTML value. This value will show up in the data output, not in the form itself. |