-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Checkbox Vue Component
Checkbox Vue component represents Checkbox component.
Checkbox Components
There are following components included:
f7-checkbox
Checkbox Properties
Prop | Type | Default | Description |
---|---|---|---|
<f7-checkbox> properties | |||
checked | boolean | Defines whether the checkbox input is checked or not | |
name | string number |
Checkbox input name | |
value | string number boolean |
Checkbox input value | |
disabled | boolean | Defines whether the checkbox input is disabled | |
readonly | boolean | Defines whether the checkbox input is readonly |
Checkbox Events
Event | Description |
---|---|
<f7-checkbox> events | |
change | Event will be triggered when checkbox state changed |
Checkboxes List
Checkboxes List is not a separate component, but just a particular case of using <f7-list>
, <f7-list-item>
.
<f7-list>
<!-- Additional "checkbox" prop to enable checkbox list item -->
<f7-list-item checkbox value="check_1" checked title="Checkbox 1"></f7-list-item>
<f7-list-item checkbox value="check_2" title="Checkbox 2"></f7-list-item>
</f7-list>
Checkbox v-model
v-model
is not supported on Checkbox vue component. Instead, just use the combination of checked
property and @change
event:
<template>
<!-- With boolean value -->
<f7-checkbox :checked="jobIsDone" @change="jobIsDone = $event.target.checked"></f7-checkbox>
<!-- With array value -->
<f7-checkbox
value="banana"
:checked="fruits.indexOf('banana') >= 0"
@change="checkFruits"
></f7-checkbox>
<f7-checkbox
value="orange"
:checked="fruits.indexOf('orange') >= 0"
@change="checkFruits"
></f7-checkbox>
<f7-checkbox
value="apple"
:checked="fruits.indexOf('apple') >= 0"
@change="checkFruits"
></f7-checkbox>
</template>
<script>
export default {
data() {
return {
jobIsDone: false,
fruits: [],
};
},
methods: {
checkFruits(event) {
const self = this;
const value = event.target.value;
if (event.target.checked) {
self.fruits.push(value);
} else {
self.fruits.splice(self.fruits.indexOf(value), 1);
}
},
},
};
</script>
Examples
<!-- Inline checkbox -->
<p>Lorem <f7-checkbox name="checkbox-1"></f7-checkbox> ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi <f7-checkbox name="checkbox-2" checked></f7-checkbox> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla mollitia!</p>
<!-- Checkboxes List -->
<f7-list>
<f7-list-item checkbox title="Books" name="demo-checkbox" checked></f7-list-item>
<f7-list-item checkbox title="Movies" name="demo-checkbox"></f7-list-item>
<f7-list-item checkbox title="Food" name="demo-checkbox"></f7-list-item>
<f7-list-item checkbox title="Drinks" name="demo-checkbox"></f7-list-item>
</f7-list>