Checkboxes allow users to select one or more options from a predetermined list of items.


Component Code
<div class="field">
        <div class="control">
            <label class="checkbox is-block margin--bottom--sm">
                <input type="checkbox" />
                    Option 1
            </label>
            <label class="checkbox is-block margin--bottom--sm">
                <input type="checkbox" />
                    Option 2
            </label>
            <label class="checkbox is-block margin--bottom--sm">
                <input type="checkbox" />
                    Option 3
            </label>
        </div>
</div>

When you should use this component

You should use this component when you want users to select multiple items from a predetermined list of items or when your users need to see all available options at once.

When you should consider something else

When you have too many options to be displayed. If users can only select one option from the list, then using radio buttons would be more appropriate.


Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team