<template>
  <div>
    <h2>Basic SwitchButton</h2>
    <div class="fitem">
      <Label for="s1">Receive mail:</Label>
      <SwitchButton inputId="s1" v-model="received"></SwitchButton>
    </div>
    <div class="fitem">
      <Label for="s2">Shared network:</Label>
      <SwitchButton inputId="s2" v-model="shared"></SwitchButton>
    </div>
    <div class="fitem">
      <Label for="s3">Subscribed:</Label>
      <SwitchButton inputId="s3" v-model="subscribed"></SwitchButton>
    </div>
    <p>Received: {{received}}, Shared: {{shared}}, Subscribed: {{subscribed}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      received: true,
      shared: true,
      subscribed: false
    };
  }
};
</script>
<style>
.fitem {
  margin-bottom: 20px;
}
.fitem label {
  width: 150px;
}
</style>