๐ข Checkbox
Basic
use NCheckbox
component to create a checkbox.
Attribute | Description |
---|---|
v-model | Reactive value of checkbox if checked or not. |
label | The label of the checkbox. |
To view the full list of attributes, see the Props section.
Color
checkbox="{color}"
- change the color of the checkbox.
You can use
breakpoints
such assm:red, xs:green
to change color based on screen size.
primary
. You can also add your own colors to the palette through the Configuration section.Form Group
You can use the NFormGroup
component to create a checkbox group for the checkbox,
Read more about the
NFormGroup
component here.
for
to false to disable for
behavior on the label since we have a custom implementation for the checkbox input.You must choose at least one event
Size
size="{size}"
- change the size of the checkbox.
๐ You can freely adjust the size of the checkbox using any size imaginable. No limits exist, and you can use
breakpoints
such assm:sm, xs:lg
to change size based on screen size.
Disabled
disabled
- disable the checkbox.
Reverse
reverse
- Switch the position of the checkbox and the label.
Rules
You can use the following rules to customize the checkbox if it is checked.
Rule Name | Description | Example |
---|---|---|
n-checked | Only apply the class if the checkbox is checked. | n-checked:3xl |
Customization
You can customize the checkbox using the una
prop and utility classes.
una.checkboxIcon
- Custom icon of the checkbox when it is checked
.
Slots
Name | Description |
---|---|
label | Use this slot to customize the label of the checkbox. |
icon | Use this slot to customize the icon of the checkbox when it is checked |
Props
export interface NCheckboxProps {
/**
* v-model binding value if the checkbox is checked.
*/
modelValue?: boolean | null
/**
* Disable the checkbox.
*/
disabled?: boolean
/**
* Switch the position of label and checkbox.
*/
reverse?: boolean
/**
* Allows you to add `UnaUI` checkbox preset properties,
* Think of it as a shortcut for adding options or variants to the preset if available.
*/
checkbox?: string
/**
* Add name attribute to the checkbox.
*
* @default null
*/
name?: string
/**
* Manually set the id attribute.
* By default, the id attribute is generated randomly for accessibility reasons.
*
* @default randomId
*/
id?: string
/**
* Manually set the for attribute.
*
* By default, the for attribute is synced with the id attribute for accessibility reasons.
*
* @default randomId
* @example
* for="options"
*/
for?: string
/**
* Display label text.
*
* @default null
*/
label?: string
/**
* Allows you to change the size of the checkbox.
*
* @default size="sm"
*
* @example
* size="sm" | size="2cm" | size="2rem" | size="2px"
*/
size?: string
/**
* `UnaUI` preset configuration
*
* @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/checkbox.ts
*/
una?: {
checkbox?: string
checkboxWrapper?: string
checkboxLabel?: string
checkboxIconBase?: string
checkboxIcon?: string
}
}
Presets
import { parseColor } from '@unocss/preset-mini/utils'
import type { Theme } from '@unocss/preset-uno'
import type { RuleContext } from '@unocss/core'
type CheckboxPrefix = 'checkbox'
export const staticCheckbox: Record<`${CheckboxPrefix}-${string}` | CheckboxPrefix, string> = {
// base
'checkbox': 'text-md checkbox-primary flex items-center transition-base w-1em h-1em border border-brand rounded n-checked:border-brand n-checked:bg-brand',
'checkbox-disabled': 'n-disabled',
'checkbox-label': 'block text-sm font-medium leading-6',
'checkbox-input': 'absolute w-full opacity-0',
'checkbox-reverse': 'flex-row-reverse',
'checkbox-peer-focus': 'peer-focus-(ring-2 ring-brand ring-offset-2 ring-offset-base)',
// wrappers
'checkbox-wrapper': 'gap-x-3 relative inline-flex items-center hover:cursor-pointer',
// icon
'checkbox-icon-base': 'm-auto h-full w-full opacity-0 transition-base n-checked:opacity-100 text-inverted',
'checkbox-icon': 'i-check', // refer to general.ts
}
export const dynamicCheckbox = [
[/^checkbox-(.*)$/, ([, body]: string[], { theme }: RuleContext<Theme>) => {
const color = parseColor(body, theme)
if ((color?.cssColor?.type === 'rgb' || color?.cssColor?.type === 'rgba') && color.cssColor.components)
return `n-${body}-600 dark:n-${body}-500`
}],
]
export const checkbox = [
...dynamicCheckbox,
staticCheckbox,
]
Component
<script setup lang="ts">
import { computed, watch } from 'vue'
import { useVModel } from '@vueuse/core'
import NIcon from '../elements/Icon.vue'
import { randomId } from '../../utils'
import type { NCheckboxProps } from '../../types/checkbox'
defineOptions({
inheritAttrs: false,
})
const props = withDefaults(
defineProps<NCheckboxProps>(),
{
modelValue: false,
disabled: false,
},
)
const emit = defineEmits<{ (...args: any): void }>()
const slots = defineSlots<{
default?: void
icon?: any
}>()
const id = computed(() => props.id ?? randomId('checkbox'))
const checked = useVModel(props, 'modelValue', emit, { passive: true })
watch(checked, (value) => {
emit('onUpdate', value)
})
</script>
<template>
<label
checkbox="wrapper"
role="checkbox"
:for="props.for ?? id"
:class="[
una?.checkboxWrapper,
{
'checkbox-reverse': reverse,
'checkbox-disabled': disabled,
},
]"
:checked="checked || null"
:disabled="disabled || null"
>
<input
:id="id"
:value="checked"
:checked="!!checked"
type="checkbox"
class="peer"
checkbox="input"
:disabled="disabled"
:name="name"
@keypress.enter="checked = !checked"
@click="checked = !checked"
>
<span
:checkbox="checkbox"
:size="size"
class="checkbox checkbox-peer-focus"
v-bind="$attrs"
>
<slot name="icon">
<NIcon
checkbox="icon-base icon-checked"
:name="una?.checkboxIcon ?? 'checkbox-icon'"
:class="una?.checkboxIconBase"
/>
</slot>
</span>
<div
v-if="slots.default || label"
checkbox="label"
:class="una?.checkboxLabel"
>
<slot>
{{ label }}
</slot>
</div>
</label>
</template>