Appearance
Toggle
The FTToggle component is a styled boolean toggle control backed by a native checkbox input. It supports v-model, disabled state, and a justified layout variant.
Usage
Composition api (script setup)
vue
<script lang="ts" setup>
import { FTToggle } from '@fasttrack-solutions/vue-components-lib';
</script><script lang="ts" setup>
import { FTToggle } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTToggle } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTToggle
}
}
</script><script>
import { FTToggle } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTToggle
}
}
</script>Default
Toggle
vue
<template>
<FTToggle label="Enable notifications" />
<FTToggle label="Already on" checked />
</template><template>
<FTToggle label="Enable notifications" />
<FTToggle label="Already on" checked />
</template>v-model
Toggle with v-model
Value: false
vue
<script lang="ts" setup>
import { ref } from 'vue'
const isEnabled = ref(false)
</script>
<template>
<FTToggle v-model="isEnabled" label="Toggle me" />
<p>Value: {{ isEnabled }}</p>
</template><script lang="ts" setup>
import { ref } from 'vue'
const isEnabled = ref(false)
</script>
<template>
<FTToggle v-model="isEnabled" label="Toggle me" />
<p>Value: {{ isEnabled }}</p>
</template>Custom true/false values
Use trueValue and falseValue to customise what v-model receives.
Toggle with custom values
Status: inactive
vue
<script lang="ts" setup>
import { ref } from 'vue'
const status = ref('inactive')
</script>
<template>
<FTToggle
v-model="status"
true-value="active"
false-value="inactive"
label="Activate"
/>
<p>Status: {{ status }}</p>
</template><script lang="ts" setup>
import { ref } from 'vue'
const status = ref('inactive')
</script>
<template>
<FTToggle
v-model="status"
true-value="active"
false-value="inactive"
label="Activate"
/>
<p>Status: {{ status }}</p>
</template>Disabled
Toggle
vue
<template>
<FTToggle label="Disabled off" disabled />
<FTToggle label="Disabled on" disabled checked />
</template><template>
<FTToggle label="Disabled off" disabled />
<FTToggle label="Disabled on" disabled checked />
</template>Justified
Label fills available width, icon moves to the right — matches the Figma "Justified" alignment variant.
Toggle
vue
<template>
<FTToggle v-model="isEnabled" label="Full width toggle" justified />
</template><template>
<FTToggle v-model="isEnabled" label="Full width toggle" justified />
</template>Flipped
Swap toggle and label positions — label appears before the toggle icon.
Toggle
vue
<template>
<FTToggle v-model="isEnabled" label="Label on the left" flipped />
</template><template>
<FTToggle v-model="isEnabled" label="Label on the left" flipped />
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | boolean | string | number | Array | false | Bound value (use with v-model) |
value | boolean | string | number | '' | Value used when modelValue is an array |
label | string | '' | Label text |
disabled | boolean | false | Disables the toggle |
justified | boolean | false | Label fills width, icon on the right |
flipped | boolean | false | Swap toggle and label positions |
checked | boolean | false | Visual-only checked state (no data binding) |
trueValue | boolean | string | number | true | Emitted value when checked |
falseValue | boolean | string | number | false | Emitted value when unchecked |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | boolean | string | number | Array | Emitted on toggle change |