Appearance

Checkbox ​

The FTCheckbox component replaces the standard html button with a design theme and a multitude of options.

Usage ​

Composition api (script setup) ​

vue
<script lang="ts" setup>
  import { FTCheckbox } from '@fasttrack-solutions/vue-components-lib';
</script>
<script lang="ts" setup>
  import { FTCheckbox } from '@fasttrack-solutions/vue-components-lib';
</script>

Options api ​

vue
<script>
  import { FTCheckbox } from '@fasttrack-solutions/vue-components-lib';
  export default {
    components: {
      FTCheckbox
    }
  }
</script>
<script>
  import { FTCheckbox } from '@fasttrack-solutions/vue-components-lib';
  export default {
    components: {
      FTCheckbox
    }
  }
</script>

Checks ​

Model as boolean ​

Buttons

Default checkbox

Checked checkbox

vue
<script lang="ts" setup>
 const checked = ref(true);
</script>

<template>
  <FTCheckbox>Default checkbox</FTCheckbox>
  <FTCheckbox v-model="checked">Checked checkbox</FTCheckbox>
</template>
<script lang="ts" setup>
 const checked = ref(true);
</script>

<template>
  <FTCheckbox>Default checkbox</FTCheckbox>
  <FTCheckbox v-model="checked">Checked checkbox</FTCheckbox>
</template>

Model as array ​

Buttons

Drama

Horror

Comedy

RomCom

vue
<script lang="ts" setup>
 const checkedGenres = ref(['Drama', 'Horror', 'Comedy']);
</script>

<template>
  <FTCheckbox v-model="checkedGenres" value="Drama">Drama</FTCheckbox>
  <FTCheckbox v-model="checkedGenres" value="Horror">Horror</FTCheckbox>
  <FTCheckbox v-model="checkedGenres" value="Comedy">Comedy</FTCheckbox>
  <FTCheckbox v-model="checkedGenres" value="RomCom">RomCom</FTCheckbox>
</template>
<script lang="ts" setup>
 const checkedGenres = ref(['Drama', 'Horror', 'Comedy']);
</script>

<template>
  <FTCheckbox v-model="checkedGenres" value="Drama">Drama</FTCheckbox>
  <FTCheckbox v-model="checkedGenres" value="Horror">Horror</FTCheckbox>
  <FTCheckbox v-model="checkedGenres" value="Comedy">Comedy</FTCheckbox>
  <FTCheckbox v-model="checkedGenres" value="RomCom">RomCom</FTCheckbox>
</template>

Checked prop ​

Using the check prop is purely for visibility and will not change any data on checking/unchecking

Buttons

Checked

Not checked

vue
<template>
  <FTCheckbox checked>Checked</FTCheckbox>
  <FTCheckbox>Not checked</FTCheckbox>
</template>
<template>
  <FTCheckbox checked>Checked</FTCheckbox>
  <FTCheckbox>Not checked</FTCheckbox>
</template>

Disabled ​

Buttons

Default checkbox

Checked checkbox

vue
<script lang="ts" setup>
 const checked = ref(true);
 const disabled = ref(true);
</script>

<template>
  <FTCheckbox disabled>Default checkbox</FTCheckbox>
  <FTCheckbox v-model="checked" :disabled="disabled">Checked checkbox</FTCheckbox>
</template>
<script lang="ts" setup>
 const checked = ref(true);
 const disabled = ref(true);
</script>

<template>
  <FTCheckbox disabled>Default checkbox</FTCheckbox>
  <FTCheckbox v-model="checked" :disabled="disabled">Checked checkbox</FTCheckbox>
</template>

Flipped ​

Buttons

Default checkbox

Checked checkbox

vue
<script lang="ts" setup>
 const checked = ref(true);
</script>

<template>
  <FTCheckbox flipped>Default checkbox</FTCheckbox>
  <FTCheckbox v-model="checked" flipped>Checked checkbox</FTCheckbox>
</template>
<script lang="ts" setup>
 const checked = ref(true);
</script>

<template>
  <FTCheckbox flipped>Default checkbox</FTCheckbox>
  <FTCheckbox v-model="checked" flipped>Checked checkbox</FTCheckbox>
</template>

Without labels ​

Buttons

vue
<script lang="ts" setup>
 const checked = ref(true);
</script>

<template>
  <FTCheckbox></FTCheckbox>
  <FTCheckbox v-model="checked"></FTCheckbox>
</template>
<script lang="ts" setup>
 const checked = ref(true);
</script>

<template>
  <FTCheckbox></FTCheckbox>
  <FTCheckbox v-model="checked"></FTCheckbox>
</template>

Copyright © Fast Track Solutions