<script setup lang="ts">
import { ref } from "vue";

const feature1 = ref<boolean>(false);
const feature2 = ref<boolean>(false);
const feature3 = ref<boolean>(false);
const feature4 = ref<boolean>(false);
const feature5 = ref<boolean>(false);
</script>

<template>
  <q-list>
    <q-item v-ripple>
      <q-item-section avatar>
        <q-checkbox keep-color color="primary" v-model="feature1" />
      </q-item-section>
      <q-item-section>
        <q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
      </q-item-section>
    </q-item>
    <q-item v-ripple>
      <q-item-section avatar>
        <q-checkbox keep-color color="primary" v-model="feature2" />
      </q-item-section>
      <q-item-section>
        <q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
      </q-item-section>
    </q-item>
    <q-item v-ripple>
      <q-item-section avatar>
        <q-checkbox keep-color color="primary" v-model="feature3" />
      </q-item-section>
      <q-item-section>
        <q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
      </q-item-section>
    </q-item>
    <q-item v-ripple>
      <q-item-section avatar>
        <q-checkbox keep-color color="primary" v-model="feature4" />
      </q-item-section>
      <q-item-section>
        <q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
      </q-item-section>
    </q-item>
    <q-item v-ripple>
      <q-item-section avatar>
        <q-checkbox keep-color color="primary" v-model="feature5" />
      </q-item-section>
      <q-item-section>
        <q-item-label>ตรวจสอบคุณสมบัติ</q-item-label>
      </q-item-section>
    </q-item>
  </q-list>
</template>

<style scoped></style>
