Checkbox Group
Checkbox groups are convenient components for a grouping of related Checkboxes.
Preview
Checkbox Groups are typically paired with a legend which identifies the group. If no legend is provided then it is expected that an aria-label will be given in order to provide an invisible label to screen readers. Each Checkbox Group should contain one or more Checkboxes which users can make selections from.
Variants #
Default #
<dt-checkbox-group name="fruits-checkbox-group" class="d-input-group__fieldset" legend="Fruits" > <dt-checkbox value="apple"><span>Apple</span></dt-checkbox> <dt-checkbox value="banana"><span>Banana</span></dt-checkbox> <dt-checkbox value="other"><span>Other</span></dt-checkbox> </dt-checkbox-group>
<fieldset class="d-input-group__fieldset" legend="Fruits" name="fruits-checkbox-group" > <legend class="d-label"> Fruits </legend> <div> <label> <div class="d-checkbox-group"> <div class="d-checkbox__input"> <input type="checkbox" name="fruits-checkbox-group" class="d-checkbox" value="apple" > </div> <div class="d-checkbox__copy d-checkbox__label"> <div class=""> <span>Apple</span> </div> </div> </div> </label> </div> <div> <label> <div class="d-checkbox-group"> <div class="d-checkbox__input"> <input type="checkbox" name="fruits-checkbox-group" class="d-checkbox" value="banana" > </div> <div class="d-checkbox__copy d-checkbox__label"> <div class=""> <span>Banana</span> </div> </div> </div> </label> </div> <div> <label> <div class="d-checkbox-group"> <div class="d-checkbox__input"> <input type="checkbox" name="fruits-checkbox-group" class="d-checkbox" value="other" > </div> <div class="d-checkbox__copy d-checkbox__label"> <div class=""> <span>Other</span> </div> </div> </div> </label> </div> </fieldset>
With Selected Values #
<dt-checkbox-group name="my-group-name" legend="My Legend" :selected-values="[`option1`]" > <dt-checkbox value="option1" label="Option 1" /> <dt-checkbox value="option2" label="Option 2" /> </dt-checkbox-group>
Disabled #
<dt-checkbox-group name="my-group-name" legend="My Legend" disabled > <dt-checkbox value="option1" label="Option 1" /> <dt-checkbox value="option2" label="Option 2" /> </dt-checkbox-group>
With Validation States #
<dt-checkbox-group name="fruits-checkbox-group" class="d-input-group__fieldset" legend="Fruits" validation-state="success" :messages="[{ message: `Success validation message.`, type: `success` }]" > <dt-checkbox value="apple"><span>Apple</span></dt-checkbox> <dt-checkbox value="banana"><span>Banana</span></dt-checkbox> <dt-checkbox value="other"><span>Other</span></dt-checkbox> </dt-checkbox-group> <dt-checkbox-group name="fruits-checkbox-group" class="d-input-group__fieldset" legend="Fruits" validation-state="warning" :messages="[{ message: `Warning validation message.`, type: `warning` }]" > <dt-checkbox value="apple"><span>Apple</span></dt-checkbox> <dt-checkbox value="banana"><span>Banana</span></dt-checkbox> <dt-checkbox value="other"><span>Other</span></dt-checkbox> </dt-checkbox-group> <dt-checkbox-group name="fruits-checkbox-group" class="d-input-group__fieldset" legend="Fruits" validation-state="error" :messages="[{ message: `Error validation message.`, type: `error` }]" > <dt-checkbox value="apple"><span>Apple</span></dt-checkbox> <dt-checkbox value="banana"><span>Banana</span></dt-checkbox> <dt-checkbox value="other"><span>Other</span></dt-checkbox> </dt-checkbox-group>
<fieldset class="d-input-group__fieldset" legend="Fruits" name="fruits-checkbox-group" > <legend class="d-label"> Fruits </legend> <div> <label> <div class="d-checkbox-group"> <div class="d-checkbox__input"> <input type="checkbox" name="fruits-checkbox-group" class="d-checkbox" value="apple" > </div> <div class="d-checkbox__copy d-checkbox__label"> <div class=""> <span>Apple</span> </div> </div> </div> </label> </div> <div> <label> <div class="d-checkbox-group"> <div class="d-checkbox__input"> <input type="checkbox" name="fruits-checkbox-group" class="d-checkbox" value="banana" > </div> <div class="d-checkbox__copy d-checkbox__label"> <div class=""> <span>Banana</span> </div> </div> </div> </label> </div> <div> <label> <div class="d-checkbox-group"> <div class="d-checkbox__input"> <input type="checkbox" name="fruits-checkbox-group" class="d-checkbox" value="other" > </div> <div class="d-checkbox__copy d-checkbox__label"> <div class=""> <span>Other</span> </div> </div> </div> </label> </div> <div class="base-input__messages d-validation-message__container"> <div role="status" aria-live="polite" class="base-input__message d-validation-message base-input__message--success d-validation-message--success"> <p>Success validation message.</p> </div> </div> </fieldset>
With Validation Messages Hidden #
<dt-checkbox-group name="my-group-name" legend="My Legend" :messages="[{ message: `My Success Message`, type: VALIDATION_MESSAGE_TYPES.SUCCESS }]" :show-messages="false" > <dt-checkbox value="option1" label="Option 1" /> <dt-checkbox value="option2" label="Option 2" /> </dt-checkbox-group>
Vue API #
Slots
Name
|
Description
|
|---|---|
default | slot for Input Group Components |
legend | slot for Input Group Legend |
Props
Name
|
Description
|
Default
|
|---|---|---|
name
required
| The name of the input group Type: string | |
dataQaGroup | A data qa tag for the radio group Type: string | 'checkbox-group' |
dataQaGroupLegend | A data qa tag for the radio group legend Type: string | 'checkbox-group-legend' |
dataQaGroupMessages | A data qa tag for the radio group messages Type: string | 'checkbox-group-messages' |
disabled | Disables the input group Type: booleanValues: truefalse | false |
id | The id of the input group Type: string | function() { return getUniqueString(); } |
legend | The legend of the input group Type: string | '' |
legendChildProps | A set of props that are passed into the legend element Type: object | {} |
legendClass | Used to customize the legend element Type: string|array|object | '' |
messages | Validation messages Type: array | [] |
messagesChildProps | A set of props that are passed into the messages container Type: object | {} |
messagesClass | Used to customize the messages container Type: string|array|object | '' |
modelValue | Not supported by this component, please use selectedValues | null |
showMessages | Show validation messages Type: booleanValues: truefalse | true |
v-model | A provided list of selected values(s) for the checkbox group Type: array | [] |
value | The value of the input group Type: string|number|boolean|object | null |
Events
Name
|
Description
|
|---|---|
input | Native input event Type: Array |
update:selectedValues | Selected values for the checkbox group Type: Array |