Checkbox

Features:

• Color
• Size
• Label
• Single value binding (boolean)
• Multiple value binding (array)

Usage

<script setup>
import { Checkbox } from 'gurunkit';
</script>

<template>
  <Checkbox label="Checkbox" />
</template>

Checkbox

Without Label

label is optional.

<script setup>
import { Checkbox } from 'gurunkit';
</script>

<template>
  <Checkbox />
</template>

Color

Set checkbox color using color props. Supported values: primary, light, error, warning, success.

It's also supports dark mode, enable it by adding dark class to html tag.

<script setup>
import { Checkbox } from 'gurunkit';
</script>

<template>
  <Checkbox color="primary" label="Primary" />
  <Checkbox color="warning" label="Warning" />
  <Checkbox color="error" label="Error" />
  <Checkbox color="light" label="Light" />
  <Checkbox color="success" label="Success" />
</template>

Primary

Warning

Error

Light

Success

Size

Set checkbox size using size props. Supported values: sm, md, lg.

<script setup>
import { Checkbox } from 'gurunkit';
</script>

<template>
  <Checkbox size="sm" label="Small" />
  <Checkbox size="md" label="Medium" />
  <Checkbox size="lg" label="Large" />
</template>

Small

Medium

Large

V-Model

Boolean Value

Bind a single boolean value using v-model.

<script setup>
import { Checkbox } from 'gurunkit';
import { ref } from 'vue';

const agree = ref(true);
</script>

<template>
  <Checkbox label="Agree" v-model="agree" />
</template>

Agree

Agree: true

Array Value

Bind a multiple value (array) using v-model.

Specify each checkbox value using input-value props.

<script setup>
import { Checkbox } from 'gurunkit';
import { ref } from 'vue';

const selected = ref(['javascript', 'php', 'cpp']);
</script>

<template>
  <Checkbox label="Javascript" input-value="javascript" v-model="selected" />
  <Checkbox label="PHP" input-value="php" v-model="selected" />
  <Checkbox label="CPP" input-value="cpp" v-model="selected" />
</template>

Javascript

PHP

CPP

Selected: [ "javascript" ]

HTML Attributes and Events

HTML attributes and events are automatically inherited.

<script setup>
import { Checkbox } from 'gurunkit';
import { ref } from 'vue';

const onCheck = () => alert('test');
</script>

<template>
  <Checkbox
    id="remember_me"
    name="remember_me"
    label="Remember Me"
    @change="onCheck"
  />
</template>

Remember Me

API

Props

Name	Type	Required	Default	Description
color	primary, light, success, warning, error	❌	primary	Checkbox color
inputValue	string	❌	null	Checkbox input value
label	string	❌	null	Checkbox label
size	sm, md, lg	❌	md	Checkbox size
All HTML attributes	-	❌	-	HTML attributes

Events

Name	Type	Description
All HTML events	-	HTML events

Model Value

Name	Type	Description
default	string or any[]	Bind a boolean or array value