Advance Form UI
Create beautifully simple form labels that float over your input fields.
Custom Form controls
Use .form-control-line.
<template>
<BRow>
<BCol md="6">
<BFormInput type="text" class="form-control-line mt-1" placeholder="Input Box"/>
<BFormSelect class="form-control-line mt-1" model-value="selected">
<BFormSelectOption value="selected">Select</BFormSelectOption>
<BFormSelectOption value="1">One</BFormSelectOption>
<BFormSelectOption value="2">Two</BFormSelectOption>
<BFormSelectOption value="3">Three</BFormSelectOption>
</BFormSelect>
<BFormTextarea class="form-control-line mt-1" placeholder="Textarea" rows="3"/>
</BCol>
<BCol md="6">
<BFormInput type="text" class="form-control-line mt-1" model-value="Aniruddha" placeholder="Name" />
<BFormSelect class="form-control-line mt-1" model-value="1">
<BFormSelectOption value="selected">Select</BFormSelectOption>
<BFormSelectOption value="1">One</BFormSelectOption>
<BFormSelectOption value="2">Two</BFormSelectOption>
<BFormSelectOption value="3">Three</BFormSelectOption>
</BFormSelect>
</BCol>
</BRow>
</template>
Floating labels
Wrap a BFormInput, BFormTextarea, or BFormSelect in a BFormFloatingLable to enable floating labesl. A placeholder is required on each input in order to make the Bootstrap 5 css work correctly.
Input
Textarea
Select
Value predefined
Validation
<template>
<BRow>
<BCol sm="6">
<h6 class="h6">Input</h6>
<BFormFloatingLabel label="Flaoting label Input" label-for="floatingEmail" class="mb-5">
<BFormInput id="floatingEmail" type="email" placeholder="name@example.com" />
</BFormFloatingLabel>
<h6 class="h6">Textarea</h6>
<BFormFloatingLabel label="Flaoting label Textarea" label-for="floatingTextarea" class="mb-5">
<BFormTextarea id="floatingTextarea" placeholder="Leave a comment here" rows="3" />
</BFormFloatingLabel>
<h6 class="h6">Select</h6>
<BFormFloatingLabel label="Works with selects" label-for="floatingSelect" class="mb-5">
<BFormSelect id="floatingSelect" model-value="selected">
<BFormSelectOption value="selected">Flaoting label select</BFormSelectOption>
<BFormSelectOption value="1">One</BFormSelectOption>
<BFormSelectOption value="2">Two</BFormSelectOption>
<BFormSelectOption value="3">Three</BFormSelectOption>
</BFormSelect>
</BFormFloatingLabel>
</BCol>
<BCol sm="6">
<h6 class="h6">Value predefined</h6>
<BFormFloatingLabel label="Input with value" label-for="floatingInputValue" class="mb-5">
<BFormInput id="floatingInputValue" type="email" placeholder="name@example.com" model-value="test@example.com" />
</BFormFloatingLabel>
<h6 class="h6">Validation</h6>
<BFormFloatingLabel label="Invalid input" label-for="floatingInputInvalid">
<BFormInput id="floatingInputInvalid" type="email" placeholder="name@example.com" model-value="test@example.com" :state="false" />
</BFormFloatingLabel>
</BCol>
</BRow>
</template>