You can add a label to your input by grouping an <IFormLabel> and any input component inside an <IFormGroup>.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<IFormGroup>
<IFormLabel>Input Label Default</IFormLabel>
<IInput v-model="value" placeholder="Type something.." />
</IFormGroup>
</template>
You can add the required property to a parent form group to add a red asterisk * to the form label.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<IFormGroup required>
<IFormLabel>Input Label Required</IFormLabel>
<IInput v-model="value" placeholder="Type something.." />
</IFormGroup>
</template>
You can add labels to either side of your input, and position it using the optional inline form group and placement form label properties.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<IFormGroup>
<IFormLabel>Input Label Default</IFormLabel>
<IInput v-model="value" placeholder="Type something.." />
</IFormGroup>
<IFormGroup inline>
<IFormLabel placement="left">Input Label Left</IFormLabel>
<IInput v-model="value" placeholder="Type something.." />
</IFormGroup>
<IFormGroup inline>
<IFormLabel placement="right">Input Label Right</IFormLabel>
<IInput v-model="value" placeholder="Type something.." />
</IFormGroup>
</template>
You're able to use the size property to control the size of your form labels, using one of the available sizes: sm, md, and lg. The default size is set to md. Setting the size on a <IFormGroup> will also affect form labels.
<script>
export default {
data() {
return {
input: ''
};
}
};
</script>
<template>
<IFormGroup>
<IFormLabel size="sm">Input</IFormLabel>
<IInput v-model="input" placeholder="Type something.." />
</IFormGroup>
<IFormGroup>
<IFormLabel size="md">Input</IFormLabel>
<IInput v-model="input" placeholder="Type something.." />
</IFormGroup>
<IFormGroup>
<IFormLabel size="lg">Input</IFormLabel>
<IInput v-model="input" placeholder="Type something.." />
</IFormGroup>
</template>