Form Checkbox ​

<template>
  <div>
    <BFormCheckbox
      id="checkbox-1"
      v-model="status"
      name="checkbox-1"
      value="accepted"
      unchecked-value="not_accepted"
    >
      I accept the terms and use
    </BFormCheckbox>

    <div>
      State: <strong>{{ status }}</strong>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const status = ref(false)
</script>

<template>
  <div>
    <b-form-group
      v-slot="{ariaDescribedby}"
      label="Using options array:"
    >
      <b-form-checkbox-group
        id="checkbox-group-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="flavour-1"
      />
    </b-form-group>

    <b-form-group
      v-slot="{ariaDescribedby}"
      label="Using sub-components:"
    >
      <b-form-checkbox-group
        id="checkbox-group-2"
        v-model="selected"
        :aria-describedby="ariaDescribedby"
        name="flavour-2"
      >
        <b-form-checkbox value="orange">Orange</b-form-checkbox>
        <b-form-checkbox value="apple">Apple</b-form-checkbox>
        <b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
        <b-form-checkbox value="grape">Grape</b-form-checkbox>
      </b-form-checkbox-group>
    </b-form-group>

    <div>
      Selected: <strong>{{ selected }}</strong>
    </div>
  </div>
</template>

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

const selected = ref([])

const options = [
  {text: 'Orange', value: 'orange'},
  {text: 'Apple', value: 'apple'},
  {text: 'Pineapple', value: 'pineapple'},
  {text: 'Grape', value: 'grape'},
]
</script>

<template>
  <BFormCheckboxGroup
    v-model="checked"
    :options="options"
    class="mb-3"
    value-field="item"
    text-field="name"
    disabled-field="notEnabled"
  />
  <div class="mt-3">
    Selected: <strong>{{ checked }}</strong>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const checked = ref(['A'])

const options = [
  {item: 'A', name: 'Option A'},
  {item: 'B', name: 'Option B'},
  {item: 'D', name: 'Option C', notEnabled: true},
  {item: {d: 1}, name: 'Option D'},
]
</script>

<template>
  <BFormCheckbox
    v-for="(car, index) in availableCars"
    :key="index"
    v-model="selectedCars"
    :value="car"
  >
    {{ car }}
  </BFormCheckbox>

  Selected: <strong>{{ concatSelectedCars }}</strong>
</template>

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

const availableCars = ['BMW', 'Mercedes', 'Toyota']
const selectedCars = ref([])

const concatSelectedCars = computed(() => selectedCars.value.join(', '))
</script>

<template>
  <div class="my-2">
    <label>Form-checkbox-group inline checkboxes (default)</label>
  </div>

  <BFormCheckboxGroup
    v-model="selected"
    :options="options"
    name="flavour-1a"
  />

  <div class="my-2">
    <label>Form-checkbox-group stacked checkboxes</label>
  </div>

  <BFormCheckboxGroup
    v-model="selected"
    :options="options"
    name="flavour-2a"
    stacked
  />

  <div class="my-2">
    <label>Individual stacked checkboxes (default)</label>
  </div>

  <BFormCheckbox
    v-for="option in options"
    :key="option.value"
    v-model="selected"
    :value="option.value"
    name="flavour-3a"
  >
    {{ option.text }}
  </BFormCheckbox>

  <div class="my-2">
    <label>Individual inline checkboxes</label>
  </div>

  <BFormCheckbox
    v-for="option in options"
    :key="option.value"
    v-model="selected"
    :value="option.value"
    name="flavour-4a"
    inline
  >
    {{ option.text }}
  </BFormCheckbox>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const selected = ref(['A'])

const options = [
  {text: 'Orange', value: 'orange'},
  {text: 'Apple', value: 'apple'},
  {text: 'Pineapple', value: 'pineapple'},
  {text: 'Grape', value: 'grape'},
]
</script>

<template>
  <div class="hstack gap-3">
    <BFormCheckbox
      v-model="button1Checked"
      button
    >
      Button Checkbox (Checked: {{ button1Checked }})
    </BFormCheckbox>

    <BFormCheckbox
      v-model="button2Checked"
      button
      button-variant="danger"
    >
      Button Checkbox (Checked: {{ button2Checked }})
    </BFormCheckbox>
  </div>
</template>

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

const button1Checked = ref(false)
const button2Checked = ref(false)
</script>

<template>
  <div class="my-2">
    <label>Form-checkbox-group inline checkboxes (default)</label>
  </div>

  <BFormCheckboxGroup
    v-model="selected"
    :options="options"
    name="buttons-1"
    buttons
  />

  <div class="my-2">
    <label>Button-group style checkboxes with variant primary and large buttons</label>
  </div>

  <BFormCheckboxGroup
    v-model="selected"
    :options="options"
    buttons
    button-variant="primary"
    size="lg"
    name="buttons-2"
  />

  <div class="my-2">
    <label>Stacked (vertical) button-group style checkboxes</label>
  </div>

  <BFormCheckboxGroup
    v-model="selected"
    :options="options"
    stacked
    buttons
  />
</template>

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

const selected = ref(['A'])

const options = [
  {text: 'Orange', value: 'orange'},
  {text: 'Apple', value: 'apple'},
  {text: 'Pineapple', value: 'pineapple'},
  {text: 'Grape', value: 'grape'},
]
</script>

<template>
  <BFormCheckbox
    v-model="switchChecked"
    switch
  >
    Switch Checkbox <strong>(Checked: {{ switchChecked }})</strong>
  </BFormCheckbox>
</template>

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

const switchChecked = ref(false)
</script>

<template>
  <div class="my-2">
    <label>Inline switch style checkboxes</label>
  </div>

  <BFormCheckboxGroup
    v-model="selected"
    :options="options"
    switches
  />

  <div class="my-2">
    <label>Stacked (vertical) switch style checkboxes</label>
  </div>

  <BFormCheckboxGroup
    v-model="selected"
    :options="options"
    switches
    stacked
  />
</template>

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

const selected = ref([])

const options = [
  {text: 'Red', value: 'red'},
  {text: 'Green', value: 'green'},
  {text: 'Yellow (disabled)', value: 'yellow', disabled: true},
  {text: 'Blue', value: 'blue'},
]
</script>

<template>
  <div class="my-2">
    <label>Plain inline checkboxes</label>
  </div>

  <BFormCheckboxGroup
    v-model="selected"
    :options="options"
    plain
  />

  <div class="my-2">
    <label>Plain stacked checkboxes</label>
  </div>

  <BFormCheckboxGroup
    v-model="selected"
    :options="options"
    plain
    stacked
  />
</template>

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

const selected = ref([])
const options = [
  {text: 'Red', value: 'red'},
  {text: 'Green', value: 'green'},
  {text: 'Yellow (disabled)', value: 'yellow', disabled: true},
  {text: 'Blue', value: 'blue'},
]
</script>

<template>
  <BFormCheckbox :state="false">Checkbox state false</BFormCheckbox>
  <BFormCheckbox :state="true">Checkbox state true</BFormCheckbox>
  <BFormCheckbox>Checkbox state null</BFormCheckbox>

  <BFormCheckboxGroup
    v-model="selected"
    :options="options"
    :state="contextualState"
    name="checkbox-validation"
  />

  <div v-if="!contextualState">Please select two</div>
  <div v-if="contextualState">Thank you</div>
</template>

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

const options = [
  {text: 'First Check', value: 'first'},
  {text: 'Second Check', value: 'second'},
  {text: 'Third Check', value: 'third'},
]

const selected = ref([])

const contextualState = computed(() => selected.value.length === 2)
</script>

<template>
  <BFormCheckbox
    v-model="checked"
    v-model:indeterminate="indeterminate"
    >Click me to see what happens</BFormCheckbox
  >
  <BButton
    class="mt-2"
    :disabled="indeterminate"
    @click="indeterminate = true"
    >Reset Indeterminate</BButton
  >
  <div class="mt-2">
    Checked: <strong>{{ checked }}</strong
    ><br />
    Indeterminate: <strong>{{ indeterminate }}</strong>
  </div>
</template>

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

const checked = ref(true)
const indeterminate = ref(true)
</script>

<template>
  <BFormGroup>
    <template #label>
      <b>Choose your flavors:</b><br />
      <BFormCheckbox
        v-model="allSelected"
        v-model:indeterminate="asIndeterminate"
        aria-describedby="flavors"
        aria-controls="flavors"
        @update:model-value="toggleAll"
      >
        {{ allSelected ? 'Un-select All' : 'Select All' }}
      </BFormCheckbox>
    </template>

    <template #default="{ariaDescribedby}">
      <BFormCheckboxGroup
        id="flavors"
        v-model="flavorSelected"
        :options="flavors"
        :aria-describedby="ariaDescribedby"
        name="flavors"
        class="ms-4"
        aria-label="Individual flavors"
        stacked
      />
    </template>
  </BFormGroup>

  <div>
    Selected: <strong>{{ flavorSelected }}</strong
    ><br />
    All Selected: <strong>{{ allSelected }}</strong
    ><br />
    Indeterminate: <strong>{{ asIndeterminate }}</strong>
  </div>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue'
import type {CheckboxValue} from 'bootstrap-vue-next'

const flavors = ['Orange', 'Grape', 'Apple', 'Lime', 'Very Berry']
const flavorSelected = ref<string[]>([])
const allSelected = ref(false)
const asIndeterminate = ref(false)

const toggleAll = (checked?: CheckboxValue | CheckboxValue[]) => {
  flavorSelected.value = checked ? flavors.slice() : []
}

watch(flavorSelected, (newValue: string[]) => {
  // Handle changes in individual flavor checkboxes
  if (newValue.length === 0) {
    asIndeterminate.value = false
    allSelected.value = false
  } else if (newValue.length === flavors.length) {
    asIndeterminate.value = false
    allSelected.value = true
  } else {
    asIndeterminate.value = true
    allSelected.value = false
  }
})
</script>

<template>
  <!-- #region template -->
  <div>
    <BFormCheckboxGroup
      id="checkbox-type-safe-basic"
      v-model="selectedUsers"
      :options="users"
      value-field="id"
      text-field="name"
      disabled-field="inactive"
    />
    <div class="mt-3">
      Selected user IDs: <strong>{{ selectedUsers }}</strong>
    </div>
  </div>
  <!-- #endregion template -->
</template>

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

interface User {
  id: number
  name: string
  inactive?: boolean
}

const users: User[] = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
  {id: 3, name: 'Charlie', inactive: true},
  {id: 4, name: 'David'},
]

// TypeScript knows selectedUsers is readonly number[]
const selectedUsers = ref<readonly number[]>([1, 4])
</script>

<template>
  <!-- #region template -->
  <BFormGroup
    label="Select users"
    description="Select one or more users"
  >
    <BFormCheckboxGroup
      id="checkbox-type-safe-validation"
      v-model="selectedIds"
      :options="users"
      :state="validationState"
      value-field="id"
      text-field="name"
      stacked
    />
    <BFormInvalidFeedback :state="validationState">
      Please select at least one user
    </BFormInvalidFeedback>
  </BFormGroup>
  <!-- #endregion template -->
</template>

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

interface User {
  id: number
  name: string
}

const users: User[] = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'},
  {id: 3, name: 'Charlie'},
]

const selectedIds = ref<readonly number[]>([])

const validationState = computed(() => selectedIds.value.length > 0)
</script>

<template>
  <!-- #region template -->
  <div>
    <BFormCheckboxGroup
      id="checkbox-type-safe-api"
      v-model="selectedUsers"
      :options="apiUsers"
      value-field="userId"
      text-field="username"
      disabled-field="disabled"
    />
    <div class="mt-3">
      Selected user IDs: <strong>{{ selectedUsers }}</strong>
    </div>
  </div>
  <!-- #endregion template -->
</template>

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

interface ApiUser {
  userId: string
  username: string
  email: string
  disabled?: boolean
}

// Simulated API response
const apiUsers: ApiUser[] = [
  {userId: 'usr_001', username: 'alice@example.com', email: 'alice@example.com'},
  {userId: 'usr_002', username: 'bob@example.com', email: 'bob@example.com'},
  {
    userId: 'usr_003',
    username: 'charlie@example.com',
    email: 'charlie@example.com',
    disabled: true,
  },
]

// TypeScript knows selectedUsers is readonly string[]
const selectedUsers = ref<readonly string[]>(['usr_001'])
</script>

<template>
  <!-- #region template -->
  <div>
    <BFormCheckboxGroup
      id="checkbox-type-safe-enum"
      v-model="selectedRoles"
      :options="roleOptions"
      value-field="value"
      text-field="label"
      disabled-field="disabled"
    />
    <div class="mt-3">
      Selected roles: <strong>{{ selectedRoles }}</strong>
    </div>
  </div>
  <!-- #endregion template -->
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {UserRole} from './CheckboxTypeSafeEnumTypes'

interface RoleOption {
  value: UserRole
  label: string
  disabled?: boolean
}

const roleOptions: RoleOption[] = [
  {value: UserRole.Admin, label: 'Administrator'},
  {value: UserRole.Editor, label: 'Editor'},
  {value: UserRole.Viewer, label: 'Viewer'},
  {value: UserRole.Guest, label: 'Guest', disabled: true},
]

// TypeScript knows selectedRoles is UserRole[]
const selectedRoles = ref<UserRole[]>([UserRole.Editor, UserRole.Viewer])
</script>