Checkbox

Allows users to select one or more options from a defined list of choices. For quick reference, see technical parameters.

Best practices

  • Use in forms only.
  • Write clear labels.
  • Choose between two types:
    • Checkbox: Allows more than one option to be selected. Can also be used for standalone checkboxes such as affirmations
    • Radio: Best for two or more distinct options where only a single option can be selected.

Example


 


<div class="bocss-checkbox__group bocss-checkbox__flex" role="group">
        <span class="bocss-checkbox__inline">
            <input type="checkbox" value="Value 1" id="checkbox-component2-0" name="checkbox-2"
                   class="bocss-checkbox checkboxClass">
            <label for="checkbox-component2-0" class="bocss-checkbox__label"
                   tabIndex="0" aria-selected="false">Value 1</label> <br />
        </span>
        <span class="bocss-checkbox__inline">
            <input type="checkbox" value="Value 2" id="checkbox-component2-1" name="checkbox-2"
                   class="bocss-checkbox checkboxClass">
            <label for="checkbox-component2-1" class="bocss-checkbox__label"
                   tabIndex="0" aria-selected="false">Value 2</label> <br />
        </span>
        <span class="bocss-checkbox__inline">
            <input type="checkbox" value="Value 3" id="checkbox-component2-2" name="checkbox-2"
                   class="bocss-checkbox checkboxClass">
            <label for="checkbox-component2-2" class="bocss-checkbox__label"
                   tabIndex="0" aria-selected="false">Value 3</label> <br />
        </span>
        <span class="bocss-checkbox__inline">
            <input type="checkbox" value="Value 4" id="checkbox-component2-3" name="checkbox-2"
                   class="bocss-checkbox checkboxClass">
            <label for="checkbox-component2-3" class="bocss-checkbox__label"
                   tabIndex="0" aria-selected="false">Value 4</label> <br />
        </span>
    
</div>

Shortcode


                [Checkbox options="Value 1, Value 2, Value 3, Value 4" class="checkboxClass" inline="true"]

Parameters

Parameter Values Description
options user-specified Options for the checkboxes
name user-specified Name of the Checkbox or Radio field
class user-specified Checkbox or Radio field class
id user-specified Checkbox or Radio field ID
inline true, false Specifies if the Checkbox or Radio field should be inline
type radio, checkbox Type of field: Checkbox or Radio
error user-specified Type of error for the Checkbox or Radio field