Appearance
Radio
The FTRadio 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 { FTRadio } from '@fasttrack-solutions/vue-components-lib';
</script><script lang="ts" setup>
import { FTRadio } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTRadio } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTRadio
}
}
</script><script>
import { FTRadio } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTRadio
}
}
</script>Checks
Model as boolean
Buttons
vue
<script lang="ts" setup>
const weather = ref('rain');
</script>
<template>
<FTRadio value="rain" v-model="weather">Default checkbox</FTRadio>
<FTRadio value="sun" v-model="weather">Checked checkbox</FTRadio>
</template><script lang="ts" setup>
const weather = ref('rain');
</script>
<template>
<FTRadio value="rain" v-model="weather">Default checkbox</FTRadio>
<FTRadio value="sun" v-model="weather">Checked checkbox</FTRadio>
</template>Disabled
Buttons
vue
<script lang="ts" setup>
const weather = ref('rain');
</script>
<template>
<FTRadio value="rain" disabled v-model="weather">Default checkbox</FTRadio>
<FTRadio value="sun" disabled v-model="weather">Checked checkbox</FTRadio>
</template><script lang="ts" setup>
const weather = ref('rain');
</script>
<template>
<FTRadio value="rain" disabled v-model="weather">Default checkbox</FTRadio>
<FTRadio value="sun" disabled v-model="weather">Checked checkbox</FTRadio>
</template>Flipped
Buttons
vue
<script lang="ts" setup>
const weather = ref('rain');
</script>
<template>
<FTRadio value="rain" flipped v-model="weather">Default checkbox</FTRadio>
<FTRadio value="sun" flipped v-model="weather">Checked checkbox</FTRadio>
</template><script lang="ts" setup>
const weather = ref('rain');
</script>
<template>
<FTRadio value="rain" flipped v-model="weather">Default checkbox</FTRadio>
<FTRadio value="sun" flipped v-model="weather">Checked checkbox</FTRadio>
</template>Without labels
Buttons
vue
<script lang="ts" setup>
const weather = ref('rain');
</script>
<template>
<FTRadio value="rain" v-model="weather"></FTRadio>
<FTRadio value="sun" v-model="weather"></FTRadio>
</template><script lang="ts" setup>
const weather = ref('rain');
</script>
<template>
<FTRadio value="rain" v-model="weather"></FTRadio>
<FTRadio value="sun" v-model="weather"></FTRadio>
</template>