Checkbox
Basic Usage
checked.value === falseplanet.value === ''planets.value === []<script setup>
import { Checkbox } from '@8ctavio/vergil/components'
import { useModel } from '@8ctavio/vergil'
const checked = useModel(false)
const planet = useModel('')
const planets = useModel([])
</script>
<template>
<!-- Single boolean value -->
<Checkbox v-model="checked" label="Checkbox"/>
<!-- Multiple values, single selection -->
<Checkbox v-model="planet" value="earth" label="Earth"/>
<Checkbox v-model="planet" value="reach" label="Reach"/>
<Checkbox v-model="planet" value="harvest" label="Harvest"/>
<!-- Multiple values, multiple selection -->
<Checkbox v-model="planets" value="Arcadia" label="Arcadia"/>
<Checkbox v-model="planets" value="requiem" label="Requiem"/>
<Checkbox v-model="planets" value="sanghelios" label="Sanghelios"/>
</template>Props
Checked value value[-checked]: (boolean | string) = true
The value-checked prop is the value assigned to the Checkbox's model value when it gets checked, and the value of the underlying input[type="checkbox"] element's value attribute.
Unchecked value value-unchecked: (boolean | string) = false
The value-unchecked prop is the value assigned to the Checkbox's model value when it gets unchecked. If value-checked is a string, value-unchecked defaults to an empty string ('').
Label label: string
MiniMarkup
The label slot may be use instead. The slot content overrides the label prop.
Description description: string
MiniMarkup
The description slot may be use instead. The slot content overrides the description prop.
<Checkbox label="Label" description="Description"/>Variant variant: ('classic' | 'card' | 'list' | 'toggle') = 'classic'
Show symbol show-symbol: boolean
Theme theme: theme = 'brand'
Size size: ('xs' | 'sm' | 'md' | 'lg' | 'xl') = 'md'
Radius radius: ('none' | 'sm' | 'md' | 'lg' | 'full') = 'md'
Spacing spacing: ('compact' | 'expanded') = ''
Disabled disabled: boolean
Elements
| element | tag | description |
|---|---|---|
input | <input[type="checkbox"]> | Checkbox's underlying input element. |
Anatomy
<label.checkbox/>
<input[type="checkbox"]/>
<span.toggle-button/>
<svg.toggle-check/>
<p.toggle-label/>
<slot name="default"/>
<p.toggle-description/>
<slot name="description"/>
API Reference
Props
| prop | type | default |
|---|---|---|
checked | string | |
value | boolean | string | undefined |
valueChecked | boolean | string | true |
valueUnchecked | boolean | string | false |
label | string | |
description | string | |
variant | 'classic' | 'card' | 'list' | 'toggle' | 'classic' |
showSymbol | boolean | |
disabled | boolean | |
descendant | boolean | |
theme | 'brand' | 'user' | 'ok' | 'info' | 'warn' | 'danger' | 'neutral' | 'brand' |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' |
radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'md' |
spacing | '' | 'compact' | 'extended' | '' |
validator | Function | |
eagerValidation | boolean | |
elements | object |
Configuration options
Checkbox's configuration options allow to overwrite some Checkbox props' default values and may be overwritten under the checkbox root-level configuration option.
checkbox.<option> | type | default | global |
|---|---|---|---|
variant | 'classic' | 'card' | 'list' | 'toggle' | 'classic' | |
theme | theme | ✅ | |
size | size | ✅ | |
radius | radius | ✅ | |
spacing | spacing | ✅ |