- Dashboard
My Library
- Base Components
- Base Pages
- My Library
- Ag Grid Table Page
Metronic Components
- Vue Bootstrap
- Vuetify
Metronic Custom
- Error Pages
- Wizard
Quick Actions
23 tasks pending
System Messages
Notifications
Another purpose persuade Due in 2 Days
+28% Would be to people Due in 2 Days
+50% Purpose would be to persuade Due in 2 Days
-27% The best product Due in 2 Days
+8% 5 new user generated report
Reports based on sales
2 new items submited
by Grog John
79 PSD files generated
Reports based on sales
$2900 worth producucts sold
Total 234 items
4.5h-avarage response time
Fostest is Barry
3 Defence alerts
40% less alerts thar last week
Avarage 4 blog posts per author
Most posted 12 time
16 authors joined last week
9 photodrapehrs, 7 designer
2 new items have been submited
by Grog John
2.8 GB-total downloads size
Mostly PSD end AL concepts
$2900 worth producucts sold
Total 234 items
7 new user generated report
Reports based on sales
4.5h-avarage response time
Fostest is Barry
Form Checkbox
- Vue Bootstrap
- Form Checkbox
Form Checkbox Inputs For cross browser consistency, <b-form-checkbox-group> and <b-form-checkbox> use Bootstrap's custom checkbox input to replace the browser default checkbox input. It is built on top of semantic and accessible markup, so it is a solid replacement for the default checkbox input. See documentation.
Single checkbox
State: not_accepted
Multiple choice checkboxes
<div>
<b-form-group label="Using options array:">
<b-form-checkbox-group
id="checkbox-group-1"
v-model="selected"
:options="options"
name="flavour-1"
></b-form-checkbox-group>
</b-form-group>
<b-form-group label="Using sub-components:">
<b-form-checkbox-group id="checkbox-group-2" v-model="selected" name="flavour-2">
<b-form-checkbox value="orange">Orange</b-form-checkbox>
<b-form-checkbox value="apple">Apple</b-form-checkbox>
<b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
<b-form-checkbox value="grape">Grape</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
<div>Selected: <strong>{{ selected }}</strong></div>
</div>export default {
data() {
return {
selected: [], // Must be an array reference!
options: [
{ text: 'Orange', value: 'orange' },
{ text: 'Apple', value: 'apple' },
{ text: 'Pineapple', value: 'pineapple' },
{ text: 'Grape', value: 'grape' }
]
}
}
} Selected: []
Selected: []
Inline and stacked checkboxes
<div>
<b-form-group label="Form-checkbox-group inline checkboxes (default)">
<b-form-checkbox-group
v-model="selected"
:options="options"
name="flavour-1a"
></b-form-checkbox-group>
</b-form-group>
<b-form-group label="Form-checkbox-group stacked checkboxes">
<b-form-checkbox-group
v-model="selected"
:options="options"
name="flavour-2a"
stacked
></b-form-checkbox-group>
</b-form-group>
<b-form-group label="Individual stacked checkboxes (default)">
<b-form-checkbox
v-for="option in options"
v-model="selected"
:key="option.value"
:value="option.value"
name="flavour-3a"
>
{{ option.text }}
</b-form-checkbox>
</b-form-group>
<b-form-group label="Individual inline checkboxes">
<b-form-checkbox
v-for="option in options"
v-model="selected"
:key="option.value"
:value="option.value"
name="flavour-4a"
inline
>
{{ option.text }}
</b-form-checkbox>
</b-form-group>
</div>export default {
data() {
return {
selected: [], // Must be an array reference!
options: [
{ text: 'Orange', value: 'orange' },
{ text: 'Apple', value: 'apple' },
{ text: 'Pineapple', value: 'pineapple' },
{ text: 'Grape', value: 'grape' }
]
}
}
}<b-form-checkbox-group> components render inline checkboxes by default, while <b-form-checkbox> renders block-level (stacked) checkboxes.
Control sizing
<div>
<b-form-checkbox size="sm">Small</b-form-checkbox>
<b-form-checkbox>Default</b-form-checkbox>
<b-form-checkbox size="lg">Large</b-form-checkbox>
</div> Use the size prop to control the size of the checkbox. The default size is medium. Supported size values are sm (small) and lg (large).
Grouped button style checkboxes
<div>
<b-form-group label="Button-group style checkboxes">
<b-form-checkbox-group
v-model="selected"
:options="options"
name="buttons-1"
buttons
></b-form-checkbox-group>
</b-form-group>
<b-form-group label="Button-group style checkboxes with variant primary and large buttons">
<b-form-checkbox-group
v-model="selected"
:options="options"
buttons
button-variant="primary"
size="lg"
name="buttons-2"
></b-form-checkbox-group>
</b-form-group>
<b-form-group label="Stacked (vertical) button-group style checkboxes">
<b-form-checkbox-group
v-model="selected"
:options="options"
stacked
buttons
></b-form-checkbox-group>
</b-form-group>
</div>export default {
data() {
return {
selected: [], // Must be an array reference!
options: [
{ text: 'Orange', value: 'orange' },
{ text: 'Apple', value: 'apple' },
{ text: 'Pineapple', value: 'pineapple' },
{ text: 'Grape', value: 'grape' }
]
}
}
}