Flowbite Vue 3Vue Checkbox - Flowbite
Default checkbox
vue
<template>
<fwb-checkbox v-model="check" label="Default checkbox" />
</template>
<script setup>
import { ref } from 'vue'
import { FwbCheckbox } from 'flowbite-vue'
const check = ref(false)
</script><template>
<fwb-checkbox v-model="check" label="Default checkbox" />
</template>
<script setup>
import { ref } from 'vue'
import { FwbCheckbox } from 'flowbite-vue'
const check = ref(false)
</script>Disabled checkbox
vue
<template>
<fwb-checkbox v-model="check" disabled label="Disabled checkbox" />
</template>
<script setup>
import { ref } from 'vue'
import { FwbCheckbox } from 'flowbite-vue'
const check = ref(false)
</script><template>
<fwb-checkbox v-model="check" disabled label="Disabled checkbox" />
</template>
<script setup>
import { ref } from 'vue'
import { FwbCheckbox } from 'flowbite-vue'
const check = ref(false)
</script>Checked checkbox
vue
<template>
<fwb-checkbox v-model="check" label="Checked checkbox" />
</template>
<script setup>
import { ref } from 'vue'
import { FwbCheckbox } from 'flowbite-vue'
const check = ref(true)
</script><template>
<fwb-checkbox v-model="check" label="Checked checkbox" />
</template>
<script setup>
import { ref } from 'vue'
import { FwbCheckbox } from 'flowbite-vue'
const check = ref(true)
</script>Link with checkbox
vue
<template>
<fwb-checkbox v-model="check">
<fwb-a href="#">
I agree with the terms and conditions.
</fwb-a>
</fwb-checkbox>
</template>
<script setup>
import { ref } from 'vue'
import { FwbA, FwbCheckbox } from 'flowbite-vue'
const check = ref(false)
</script><template>
<fwb-checkbox v-model="check">
<fwb-a href="#">
I agree with the terms and conditions.
</fwb-a>
</fwb-checkbox>
</template>
<script setup>
import { ref } from 'vue'
import { FwbA, FwbCheckbox } from 'flowbite-vue'
const check = ref(false)
</script>