Checkbox

The input element with a type attribute whose value is "text" represents a one-line plain text edit control for the input element’s value.

Examples

Checkbox

Code

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  checkbox: false
})
</script>

<template>
  <base-checkbox v-model="form.checkbox" text="Checkbox" />
</template>

Label

Code

<script setup lang="ts">
import { ref } from 'vue'

const checkbox1 = ref(false)
const checkbox2 = ref(false)
</script>

<template>
  <base-checkbox
    v-model="checkbox1"
    text="Checkbox"
    label="Label"
    layout="vertical"
    description="Vertical Layout"
  />
  <base-checkbox
    v-model="checkbox2"
    text="Checkbox"
    label="Label"
    layout="horizontal"
    description="Hertical Layout"
  />
</template>

Color

Code

<script setup lang="ts">
import { ref } from 'vue'

const primaryCheckbox = ref(false)
const secondaryCheckbox = ref(false)
const infoCheckbox = ref(false)
const successCheckbox = ref(false)
const warningCheckbox = ref(false)
const dangerCheckbox = ref(false)
</script>

<template>
  <base-checkbox v-model="primaryCheckbox" theme="primary" />
  <base-checkbox v-model="secondaryCheckbox" theme="secondary" />
  <base-checkbox v-model="infoCheckbox" theme="info" />
  <base-checkbox v-model="successCheckbox" theme="success" />
  <base-checkbox v-model="warningCheckbox" theme="warning" />
  <base-checkbox v-model="dangerCheckbox" theme="danger" />
</template>

Helper

Code

<script setup lang="ts">
import { ref } from 'vue'

const checkbox1 = ref(false)
const checkbox2 = ref(false)
const checkbox3 = ref(false)
const checkbox4 = ref(false)
const checkbox5 = ref(false)

const errors = ref(['Error example'])
</script>

<template>
  <base-checkbox v-model="checkbox1" text="Checkbox" label="Label" layout="horizontal" required />
  <base-checkbox
    v-model="checkbox2"
    text="Checkbox"
    label="Label"
    layout="horizontal"
    description="Description example"
  />
  <base-checkbox
    v-model="checkbox3"
    text="Checkbox"
    label="Label"
    layout="horizontal"
    :helpers="['Helper example']"
  />
  <base-checkbox
    v-model="checkbox4"
    text="Checkbox"
    label="Label"
    layout="horizontal"
    v-model:errors="errors"
  />
  <base-checkbox
    v-model="checkbox5"
    text="Checkbox"
    label="Label"
    layout="horizontal"
    description="Disabled"
    disabled
  />
</template>

Checkbox API

Props

Name	Type	Default	Description
v-model	string		v-model is required.
v-model:errors	string[]		Input error message.
true-value	string	true	Checkbox checked value.
false-value	string	false	Checkbox unchecked value.
label	string		Checkbox label.
text	string		Checkbox text.
description	string		Input description.
layout	horizontal vertical	vertical	Input layout.
required	boolean	false	if true checkbox is required.
helpers	string[]		Input helper message.
data-testid	string		Testing ID.

Automated Test Guide

If you pass a data-testid to the <base-checkbox> component, it will automatically generate unique data-testid attributes for testing.

Gherkin Scenario

When I toggle checkbox "check-agreement"

Step Definition

When('I toggle checkbox {string}', (selector: string) => {
  cy.get(`[data-testid="${selector}"]`).click()
})

Code Implementation

<script setup>
import { ref } from 'vue'

const agreement = ref(false)
</script>

<template>
  <base-checkbox v-model="agreement" data-testid="check-agreement" />
</template>