Components
Checkboxgroup
Easily create a group of checkboxes.
Usage
Checkboxgroup
This is a group of checkboxes. The returned value is an array of booleans.
This is a checkbox with customized color.
This is a checkbox with long text. Lorem ipsum dolor, sit amet consectetur adipisicing elit. In atque quaerat temporibus aspernatur tempora culpa magni quis necessitatibus ducimus, error dolore, dolorem molestias esse nam amet vitae, maxime possimus sunt.
This is a checkbox with loading state.
This is a disabled checkbox.
<template>
<NXW-Checkboxgroup
v-model="modelValue"
label="Checkboxgroup"
description="This is a group of checkboxes. The returned value is an array of booleans."
:items="items"
/>
</template>
<script setup lang="ts">
const modelValue = ref([false, true, true, false, true])
const items = ref([
{
label: 'Option 1',
description: 'This is a checkbox with customized color.',
color: {
label: 'text-green-500 dark:text-green-500',
description: 'text-green-400 dark:text-green-400'
}
},
{
label: 'Option 2',
description:
'This is a checkbox with long text. Lorem ipsum dolor, sit amet consectetur adipisicing elit. In atque quaerat temporibus aspernatur tempora culpa magni quis necessitatibus ducimus, error dolore, dolorem molestias esse nam amet vitae, maxime possimus sunt.'
},
{
label: 'Option 3',
description: 'This is a checkbox with loading state.',
loading: true
},
{
label: 'Option 4',
description: 'This is a disabled checkbox.',
disabled: true
},
{
label: 'Option 5'
}
])
</script>
Props
color
object
Default
{
"label": "text-primary-500 dark:text-primary-500",
"description": "text-gray-500 dark:text-gray-400"
}
description
string
Default
disabled
boolean
Default
false
generalCheckboxProps
object
Default
{
}
items
array
Default
;[]
label
string
Default
loading
boolean
Default
false
multiple
boolean
Default
false
noRadio
boolean
Default
false
notZero
boolean
Default
false
text
object
Default
{
"label": "text-lg font-medium",
"description": "text-sm"
}
width
string
Default
w-full
Slots
group-label (slot)
Custom label content for the checkboxgroup.
Slot-Label
This is a group of checkboxes. The returned value is an array of booleans.
<template>
<NXW-Checkboxgroup
v-model="modelValue"
label="Checkboxgroup"
description="This is a group of checkboxes. The returned value is an array of booleans."
:items="items"
>
<template #group-label> Slot-Label </template>
</NXW-Checkboxgroup>
</template>
<script setup lang="ts">
const modelValue = ref([false, true, true])
const items = ref([
{
label: 'Option 1'
},
{
label: 'Option 2'
},
{
label: 'Option 3'
}
])
</script>
group-description (slot)
Custom description content for the checkboxgroup.
Checkboxgroup
This is a custom description slot.
<template>
<NXW-Checkboxgroup
v-model="modelValue"
label="Checkboxgroup"
description="This is a group of checkboxes. The returned value is an array of booleans."
:items="items"
>
<template #group-description> This is a custom description slot. </template>
</NXW-Checkboxgroup>
</template>
<script setup lang="ts">
const modelValue = ref([false, true, true])
const items = ref([
{
label: 'Option 1'
},
{
label: 'Option 2'
},
{
label: 'Option 3'
}
])
</script>