Skip to content

Vue 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>

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>

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>
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>

Released under the MIT License.