Checkbox

Base checkbox form

Usage

Simple Usage

Checklist Labelpreview

<template>
  <p-checkbox>Checklist Label</p-checkbox>
</template>

With Subtext

Checklist Label

Textpreview

<template>
  <p-checkbox>
    <div>Checklist Label</div>
    <p-caption>Text</p-caption>
  </p-checkbox>
</template>

Disabled State

Checkbox Label preview

<template>
  <p-checkbox disabled>
    Checkbox Label
  </p-checkbox>
</template>

Readonly State

Checkbox Label preview

<template>
  <p-checkbox readonly>
    Checkbox Label
  </p-checkbox>
</template>

Binding v-model

Checkbox Labelpreview

Result :

false

<template>
  <p-checkbox v-model="modelA">Text</p-checkbox>
</template>

Custom v-model value

By default, value of toggle is always Boolean, but you can change it with value and unchecked-value.

I agree with Term and Condition preview

Result :

disagree

<template>
  <p-checkbox
    v-model="model"
    value="agree"
    unchecked-value="disagree">
    Active
  </p-checkbox>
</template>

Array v-model

If v-model state is an array it will append the value instead of replacing it.

Warn! selected order is not guaranteed

AppleGrapePineappleObjectArray

preview

Selected :

[]

<template>
  <div class="flex flex-col space-y-3">
    <p-checkbox v-model="selected" value="apple">Apple</p-checkbox>
    <p-checkbox v-model="selected" value="grape">Grape</p-checkbox>
    <p-checkbox v-model="selected" value="pineapple">Pineapple</p-checkbox>
    <p-checkbox v-model="selected" :value="{ id: 1, name: 'Tarjono' }">Object</p-checkbox>
    <p-checkbox v-model="selected" :value="['Item 1']">Array</p-checkbox>
  </div>
</template>

Indeterminate (3-state)

Indeterminate is condition between checked and unchecked. It's usefull for case like: selectAll feature.

Select All applegrapeorange

preview

Result :

[
  "apple"
]

<template>
  <div class="flex flex-col space-y-3">
    <p-checkbox
      v-model="selectAll"
      :indeterminate="indeterminate">
      Select All
    </p-checkbox>

    <template v-for="item of items">
      <p-checkbox v-model="result" :value="item" class="ml-4">
        {{ item }}
      </p-checkbox>
    </template>
  </div>
</template>

<script setup>
  const items  = ref(['apple', 'grape', 'orange'])
  const result = ref([])

  const selectAll = computed({
    get () {
      return result.value.length === items.value.length
    },
    set (value) {
      if (selectAll.value !== value)
        result.value = value ? [...items.value] : []
    },
  })

  const indeterminate = computed(() => {
    return result.value.length > 0
      && result.value.length < items.value.length
  })
</script>

Custom Appearance

It's possible to create checkbox with custom appearance. If don't wanna see "check-appearance", don't forget to add value none in prop appearance.

Olivia Withness olivia@eth.com

Hyuga Kojiro hyuga@gmail.com

Marsha Timoty timoty@marsha.com

preview

Selected :

[]

<template>
  <div class="flex flex-col space-y-3">
    <p-checkbox appearance="none" v-model="selected" value="Olivia Withness">
      <template #default>
        <p-card
          element="div"
          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
          sectioned>
          <div class="flex items-center space-x-3">
            <IconBee class="text-muted dark:text-dark-muted" />
            <div>
              Olivia Withness
              <p-caption>olivia@eth.com</p-caption>
            </div>
          </div>
        </p-card>
      </template>
    </p-checkbox>
    <p-checkbox appearance="none" v-model="selected" value="Hyuga Kojiro">
      <template #default>
        <p-card
          element="div"
          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
          sectioned>
          <div class="flex items-center space-x-3">
            <IconBee class="text-muted dark:text-dark-muted" />
            <div>
              Hyuga Kojiro
              <p-caption>hyuga@gmail.com</p-caption>
            </div>
          </div>
        </p-card>
      </template>
    </p-checkbox>
    <p-checkbox appearance="none" v-model="selected" value="Marsha Timoty" disabled>
      <template #default>
        <p-card
          element="div"
          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
          sectioned>
          <div class="flex items-center space-x-3">
            <IconBee class="text-muted dark:text-dark-muted" />
            <div>
              Marsha Timoty
              <p-caption>timoty@marsha.com</p-caption>
            </div>
          </div>
        </p-card>
      </template>
    </p-checkbox>
  </div>
</template>

API

Props

Props	Type	Default	Description
checked	Boolean	false	Checked condition. if it is true, Checkbox will be checked on first time
value	Any	true	Checked value
uncheckedValue	Any	false	Unchecked value
disabled	Boolean	false	Disabled state
readonly	Boolean	false	Readonly state
indeterminate	Boolean	false	Indeterminate state
modelValue	Any	-	v-model value

Slots

Name	Description
default	Content to place in toggle

Events

Name	Arguments	Description
change	Boolean	Event when value changed

See Also

• Toggle
• Radio