Components
Checkbox
Quickly tick off your options.
Usage
pnpm i @nuxtwind/components
<template>
<NXW-Checkbox
v-model="modelValue"
label="Install NuxtWind"
description="pnpm i @nuxtwind/components"
/>
</template>
<script setup lang="ts">
const modelValue = ref(true)
</script>
Props
color
object
Default
{
"label": "text-black dark:text-gray-300",
"description": "text-gray-500 dark:text-gray-400",
"iconInactive": "text-gray-500 dark:text-gray-400",
"iconActive": "text-primary-800 dark:text-primary-800",
"hover": "group-hover:text-secondary-700 dark:group-hover:text-secondary-700"
}
description
string
Default
disabled
boolean
Default
false
label
string
Default
loading
boolean
Default
false
radio
boolean
Default
false
text
object
Default
{
"label": "text-sm font-medium",
"description": "text-xs font-normal"
}
Slots
label (slot)
Custom label content for the checkbox.
<template>
<NXW-Checkbox v-model="modelValue">
<template #label> Install NuxtWind </template>
</NXW-Checkbox>
</template>
<script setup lang="ts">
const modelValue = ref(true)
</script>
description (slot)
Custom description content for the checkbox.
pnpm i @nuxtwind/components
<template>
<NXW-Checkbox v-model="modelValue" label="Install NuxtWind">
<template #description> pnpm i @nuxtwind/components </template>
</NXW-Checkbox>
</template>
<script setup lang="ts">
const modelValue = ref(true)
</script>