Checkbox

Introduction

The checkbox component is used for users to select one or more options from multiple choices. mengyue-components has encapsulated this component and conducted vitest testing. There are two tags for implementing checkboxes: <MYCheckbox /> or <MYCheckbox></MYCheckbox><MYCheckbox-group /> or <MYCheckbox-group></MYCheckbox-group> for checkbox groups

Basic Usage

Single Checkbox

Use modelValue to bind the value of a single checkbox.

Code Demo

Single Checkbox

<template>
  <MYCheckbox v-model='singleChecked'>Single Checkbox</MYCheckbox>
</template>

展开代码

Checkbox Group

Use <MYCheckbox-group></MYCheckbox-group> to group checkboxes together.

Code Demo

Option 1Option 2Option 3

<template>
  <MYCheckbox-group v-model='selectedValues1'>
    <MYCheckbox value='option1'>Option 1</MYCheckbox>
    <MYCheckbox value='option2'>Option 2</MYCheckbox>
    <MYCheckbox value='option3'>Option 3</MYCheckbox>
  </MYCheckbox-group>
</template>

展开代码

Layout Direction

Vertical Layout

Use direction="vertical" to arrange checkboxes vertically.

Code Demo

AppleBananaOrange

<template>
  <MYCheckbox-group v-model='selectedValues2' direction='vertical'>
    <MYCheckbox value='apple'>Apple</MYCheckbox>
    <MYCheckbox value='banana'>Banana</MYCheckbox>
    <MYCheckbox value='orange'>Orange</MYCheckbox>
  </MYCheckbox-group>
</template>

展开代码

Disabled State

Entire Group Disabled

Disable the entire checkbox group.

Code Demo

RedGreenBlue

<template>
  <MYCheckbox-group v-model='selectedValues3' disabled>
    <MYCheckbox value='red'>Red</MYCheckbox>
    <MYCheckbox value='green'>Green</MYCheckbox>
    <MYCheckbox value='blue'>Blue</MYCheckbox>
  </MYCheckbox-group>
</template>

展开代码

Custom Spacing

Use the gap prop to control the spacing between checkboxes.

Code Demo

CatDogBird

<template>
  <MYCheckbox-group v-model='selectedValues5' gap='72px'>
    <MYCheckbox value='cat'>Cat</MYCheckbox>
    <MYCheckbox value='dog'>Dog</MYCheckbox>
    <MYCheckbox value='bird'>Bird</MYCheckbox>
  </MYCheckbox-group>
</template>

展开代码

API Reference

MYCheckboxGroup Props

Parameter	Description	Type	Options	Default
modelValue	Bound value	array	—	[]
direction	Layout direction	string	horizontal/vertical	horizontal
disabled	Whether disabled	boolean	—	false
gap	Spacing	string	Supports CSS units	12px
checkStrictly	Whether parent-child are strictly linked	boolean	—	false

MYCheckbox Props

Parameter	Description	Type	Options	Default
modelValue	Bound value	boolean	—	false
value	Option value	string | number	—	—
disabled	Whether disabled	boolean	—	false

Type Definitions

interface CheckboxGroupProps {
  modelValue?: (string | number)[];
  direction?: 'horizontal' | 'vertical';
  disabled?: boolean;
  gap?: string;
}

interface CheckboxProps {
  modelValue?: boolean;
  value?: string | number;
  disabled?: boolean;
}