Preview
Default
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.
Model
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);
}
},
},
};
Variants
With Legend
With Slotted Legend
Disabled
With Validation Messages
With Validation Messages Hidden
Extending
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.
Example
<script>
import { DtInputGroup } from '@dialpad/dialtone/vue';
export default {
name: "MyComponent",
extends: DtInputGroup,
...
};
</script>
Vue API
import { DtInputGroup } from '@dialpad/dialtone-vue';