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" legend="Fruits" :selectedValues="[]" > <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>
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" legend="Fruits" validation-state="positive" :messages="[{ message: `Positive validation message.`, type: `positive` }]" > <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" 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" legend="Fruits" validation-state="critical" :messages="[{ message: `Critical validation message.`, type: `critical` }]" > <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>
With Validation Messages Hidden #
<dt-checkbox-group name="my-group-name" legend="My Legend" :messages="[{ message: 'My Positive Message', type: `positive` }]" :show-messages="false" > <dt-checkbox value="option1" label="Option 1" /> <dt-checkbox value="option2" label="Option 2" /> </dt-checkbox-group>
Vue API #
import { DtCheckboxGroup } from '@dialpad/dialtone-vue';Slots
Name
|
Type
|
|---|---|
default | slot for Input Group Components |
legend | slot for Input Group Legend |
Props
Name
|
Default
|
Type
|
|---|---|---|
name
required
| string The name of the input group | |
dataQaGroup | 'checkbox-group' | string A data qa tag for the radio group |
dataQaGroupLegend | 'checkbox-group-legend' | string A data qa tag for the radio group legend |
dataQaGroupMessages | 'checkbox-group-messages' | string A data qa tag for the radio group messages |
disabled | false |
"true"
|
"false"
Disables the input group |
id | generated unique ID | string The id of the input group |
legend | '' | string The legend of the input group |
legendChildProps | {} | object A set of props that are passed into the legend element |
legendClass | '' | string|array|object Used to customize the legend element |
messages | [] | array Validation messages |
messagesChildProps | {} | object A set of props that are passed into the messages container |
messagesClass | '' | string|array|object Used to customize the messages container |
modelValue | [] | array A provided list of selected values(s) for the checkbox group |
showMessages | true |
"true"
|
"false"
Show validation messages |
value | null | string|number|boolean|object The value of the input group |
Events
Name
|
Type
|
|---|---|
update:modelValue | Array Selected values for the checkbox group |