Checkbox ​

<script setup lang="ts">
import { ref } from 'vue'
import { Checkbox } from 'frappe-ui'

const value = ref(false)
</script>

<template>
  <Checkbox v-model="value" label="Accept terms and conditions" />
</template>

<script setup lang="ts">
import { Checkbox } from 'frappe-ui'
</script>

<template>
  <div class="flex flex-col gap-3 items-start">
    <Checkbox size="sm" label="Small" />
    <Checkbox size="md" label="Medium" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Checkbox } from 'frappe-ui'

const accepted = ref(false)
const required = ref(true)
const showError = ref(false)

const error = computed(() =>
  showError.value ? 'You must accept the terms.' : '',
)
</script>

<template>
  <div class="flex gap-8 items-start">
    <Checkbox
      v-model="accepted"
      label="Accept terms"
      description="Required to continue."
      :error="error"
      :required="required"
    />
    <div
      class="flex flex-col gap-2 items-start border-l border-outline-gray-2 pl-6"
    >
      <Checkbox v-model="required" label="required" />
      <Checkbox v-model="showError" label="show error" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Checkbox } from 'frappe-ui'
</script>

<template>
  <div class="flex flex-col gap-3 items-start">
    <Checkbox label="Default" />
    <Checkbox label="Required" required />
    <Checkbox label="Disabled" disabled />
    <Checkbox label="With error" error="Required to continue." />
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { Checkbox } from 'frappe-ui'

const settings = reactive({
  paymentDays: true,
  taxApplicable: true,
  deductFullTax: false,
  roundToInteger: false,
  doNotInclude: true,
  removeIfZero: false,
})
</script>

<template>
  <div class="flex flex-col gap-1 items-start w-80">
    <Checkbox v-model="settings.paymentDays" label="Depends on payment days" />
    <Checkbox v-model="settings.taxApplicable" label="Is Tax Applicable" />
    <Checkbox
      v-model="settings.deductFullTax"
      label="Deduct full tax on selected payroll date"
    />
    <Checkbox v-model="settings.roundToInteger" label="Round to the nearest integer" />
    <Checkbox v-model="settings.doNotInclude" label="Do not include in total" disabled />
    <Checkbox v-model="settings.removeIfZero" label="Remove if zero valued" />
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { Checkbox } from 'frappe-ui'

const settings = reactive({
  roundToInteger: false,
  removeIfZero: false,
})

const helperText =
  'If enabled, the value specified or calculated in this component will not contribute to the earnings or deductions. However, its value can be referenced by other components that can be added or deducted.'
</script>

<template>
  <div class="flex flex-col gap-3 items-start w-[28rem]">
    <Checkbox
      v-model="settings.roundToInteger"
      label="Round to the nearest integer"
      :description="helperText"
    />
    <Checkbox
      v-model="settings.removeIfZero"
      label="Remove if zero valued"
      :description="helperText"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { Checkbox } from 'frappe-ui'

const settings = reactive({
  inclusiveText: false,
  paymentSchedule: false,
  taxesAsTable: true,
})
</script>

<template>
  <div class="flex flex-col gap-4 items-start w-[32rem]">
    <p class="text-lg-medium text-ink-gray-9">Print settings</p>
    <div class="flex flex-wrap gap-x-8 gap-y-2">
      <Checkbox v-model="settings.inclusiveText" label="Show inclusive text in print" />
      <Checkbox
        v-model="settings.paymentSchedule"
        label="Show payment schedule in print"
      />
      <Checkbox v-model="settings.taxesAsTable" label="Show taxes as table in print" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { Checkbox } from 'frappe-ui'

const ticketTypes = reactive({
  primary: true,
  promotions: true,
  social: true,
  updates: true,
})
</script>

<template>
  <div class="flex gap-3 items-start border-b border-outline-gray-1 py-3 w-[28rem]">
    <p class="text-base text-ink-gray-7 pt-1.5 w-40 shrink-0">Default ticket type</p>
    <div class="flex flex-col gap-1 items-start">
      <Checkbox v-model="ticketTypes.primary" label="Primary" disabled />
      <Checkbox v-model="ticketTypes.promotions" label="Promotions" />
      <Checkbox v-model="ticketTypes.social" label="Social" />
      <Checkbox v-model="ticketTypes.updates" label="Updates" />
    </div>
  </div>
</template>