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="values"
:items="[object Object],[object Object],[object Object],[object Object],[object Object]"
label="Checkboxgroup"
description="This is a group of checkboxes. The returned value is an array of booleans."
/>
</template>
Props
color
object
Default
<template>
<NXW-Checkboxgroup
:color="{
label: 'text-primary-500 dark:text-primary-500',
description: 'text-gray-500 dark:text-gray-400',
}"
/>
</template>
description
string
Default
"" (empty string)
disabled
boolean
Default
false
general-checkbox-props
object
Default
<template>
<NXW-Checkboxgroup :general-checkbox-props="{}" />
</template>
Example
<template>
<NXW-Checkboxgroup
:general-checkbox-props="{
color: {
label: 'text-primary-500 dark:text-primary-500',
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: 'hover:text-secondary-700 dark:hover:text-secondary-700',
},
text: { label: 'text-sm', description: 'text-xs' },
}"
/>
</template>
items
array
required
Default
<template>
<NXW-Checkboxgroup :items="[]" />
</template>
Example
<template>
<NXW-Checkboxgroup
:items="[
{
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 loading state.',
loading: 'true',
},
{
label: 'Option 3',
description: 'This is a disabled checkbox.',
disabled: 'true',
},
{ label: 'Option 4' },
]"
/>
</template>
label
string
Default
"" (empty string)
loading
boolean
Default
false
multiple
boolean
Default
false
noRadio
boolean
Default
false
notZero
boolean
Default
false
text
object
Default
<template>
<NXW-Checkboxgroup
:text="{ label: 'text-lg font-medium', description: 'text-sm' }"
/>
</template>
width
string
Default
w-full