Input 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 Input Group should contain one or more inputs which users can interact with.
<dt-input-group name="fruits-input-group" > <dt-radio value="apple"><span>Apple</span></dt-radio> <dt-radio value="banana"><span>Banana</span></dt-radio> <dt-radio value="other"><span>Other</span></dt-radio> </dt-input-group>
The Vue model can have one of the following types [String, Number, Boolean, Object]:
// default = null
const value = 'some value';
The Vue model is dependant on the child component(s) implementing the provided groupContext and calling the provided setGroupValue method which will handle updating the provided groupContext and Vue model in the parent.
import {
DtInputMixin,
DtGroupableInputMixin,
} from '@dialpad/dialtone/vue';
export default {
name: 'MyInputElement',
mixins: [DtInputMixin, DtGroupableInputMixin],
computed: {
groupValue () {
return this.groupContext?.value;
},
inputListeners () {
return {
change: event => this.emitValue(event.target.value),
};
},
},
watch: {
groupValue: {
immediate: true,
handler (newGroupValue) {
if (this.hasGroup) {
// update internal value when the input group value changes
this.internalChecked = newGroupValue === this.value;
}
},
},
},
methods: {
emitValue (value) {
if (value !== this.groupValue) {
// update provided value if injected
this.setGroupValue(value);
this.$emit('update:modelValue', value);
}
},
},
};
<dt-input-group name="input-group-with-legend" legend="With Legend" > <!-- Input Elements --> </dt-input-group>
<dt-input-group name="input-group-with-legend" > <!-- Input Elements --> <template #legend> With Slotted Legend </template> </dt-input-group>
<dt-input-group name="input-group-disabled" legend="Disabled" disabled > <!-- Input Elements --> </dt-input-group>
<dt-input-group name="input-group-with-positive-message" legend="With Positive Message" :messages="[{ message: `Positive validation message`, type: VALIDATION_MESSAGE_TYPES.POSITIVE }]" > <!-- Input Elements --> </dt-input-group> <dt-input-group name="input-group-with-warning-message" legend="With Warning Message" :messages="[{ message: `Warning`, type: VALIDATION_MESSAGE_TYPES.WARNING }]" > <!-- Input Elements --> </dt-input-group> <dt-input-group name="input-group-with-critical-message" legend="With Critical Message" :messages="[{ message: `Critical`, type: VALIDATION_MESSAGE_TYPES.CRITICAL }]" > <!-- Input Elements --> </dt-input-group>
<dt-input-group name="input-group-with-critical-messages-hidden" legend="With Critical Messages Hidden" :messages="[{ message: `Critical`, type: VALIDATION_MESSAGE_TYPES.CRITICAL }]" :show-messages="false" > <!-- Input Elements --> </dt-input-group>
If your input(s) require additional logic in order to be grouped then you can extend the Input Group using extends in your Vue SFC.
<script>
import { DtInputGroup } from '@dialpad/dialtone/vue';
export default {
name: "MyComponent",
extends: DtInputGroup,
...
};
</script>
import { DtInputGroup } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
default | slot for Input Group Components |
legend | slot for Input Group Legend |
Name
|
Default
|
Type
|
|---|---|---|
name
required
| string The name of the input group | |
dataQaGroup | 'input-group' | string A data qa tag for the input group |
dataQaGroupLegend | 'input-group-legend' | string A data qa tag for the input group legend |
dataQaGroupMessages | 'input-group-messages' | string A data qa tag for the input 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 |
showMessages | true |
"true"
|
"false"
Show validation messages |
value | null | string|number|boolean|object The value of the input group |
Name
|
Type
|
|---|---|
update:modelValue | String | Number | Boolean | Object Event fired to sync the modelValue prop with the parent component |
Input Group documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope