Checkbox

The ACheckbox component extend the standard html checkbox element with the support of various styles, states and size.

Import

import { ACheckbox } from 'ayovue'
import 'ayovue/themes/default/checkbox.css'

Example

defaultoutlineddisabledcheckedchecked
roundedoutlineddisabledcheckedchecked

Playground

---

modelValue

outlined

rounded

disabled

variant

primarysecondarysuccessinfowarningdanger

label

size

<ACheckbox />

Props

Checkbox component has the following props.

Prop name	Type	Required	Default value	Details
label	String	No		Define a lable for the checkbox.
name	String	No		Define a name for the checkbox Element.
value	any	No		Value for the checkbox Element.
modelValue	any	No		ModelValue to bind using v-model.
outlined	Boolean	No	false	Enable outlined variant.
rounded	Boolean	No	false	Enable rounded variant.
disabled	Boolean	No	false	Make the checkbox disable.
variant	String	No	primary	Defines the color variant of checkbox which has the following values: primary, secondary, success, info, warning , danger
size	Number	No	16	Defines the size of the checkbox.

Slots

Checkbox component has the following slots.

Slot name	Description	Props
default	Content of the Checkbox component.	N/A

Events

Checkbox component supports all native events.