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&lt;sup&gt;1&lt;/sup&gt;" 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.