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'
import { BaseCheckbox } from '@point-hub/papp'

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

<template>
  <component :is="BaseCheckbox" v-model="form.checkbox" text="Checkbox" />
</template>

Label

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseCheckbox } from '@point-hub/papp'

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

<template>
  <component
    :is="BaseCheckbox"
    v-model="checkbox1"
    text="Checkbox"
    label="Label"
    layout="vertical"
    description="Vertical Layout"
  />
  <component
    :is="BaseCheckbox"
    v-model="checkbox2"
    text="Checkbox"
    label="Label"
    layout="horizontal"
    description="Hertical Layout"
  />
</template>

Color

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseCheckbox } from '@point-hub/papp'

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>
  <component :is="BaseCheckbox" v-model="primaryCheckbox" theme="primary" />
  <component :is="BaseCheckbox" v-model="secondaryCheckbox" theme="secondary" />
  <component :is="BaseCheckbox" v-model="infoCheckbox" theme="info" />
  <component :is="BaseCheckbox" v-model="successCheckbox" theme="success" />
  <component :is="BaseCheckbox" v-model="warningCheckbox" theme="warning" />
  <component :is="BaseCheckbox" v-model="dangerCheckbox" theme="danger" />
</template>

Helper

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseCheckbox } from '@point-hub/papp'

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>
  <component
    :is="BaseCheckbox"
    v-model="checkbox1"
    text="Checkbox"
    label="Label"
    layout="horizontal"
    required
  />
  <component
    :is="BaseCheckbox"
    v-model="checkbox2"
    text="Checkbox"
    label="Label"
    layout="horizontal"
    description="Description example"
  />
  <component
    :is="BaseCheckbox"
    v-model="checkbox3"
    text="Checkbox"
    label="Label"
    layout="horizontal"
    :helpers="['Helper example']"
  />
  <component
    :is="BaseCheckbox"
    v-model="checkbox4"
    text="Checkbox"
    label="Label"
    layout="horizontal"
    v-model:errors="errors"
  />
  <component
    :is="BaseCheckbox"
    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.
label	string		Checkbox label.
text	string		Checkbox text.
description	string		Input description.
placeholder	string		Input placeholder.
layout	horizontal vertical	vertical	Input layout.
required	boolean	false	if true checkbox is required.
disabled	boolean	false	if true checkbox is disabled.
helpers	string[]		Input helper message.