Appearance

Radio Group ​

The FTRadioGroup component provides a simple inline radio button group for selecting between mutually exclusive options. It supports string, boolean, and number values, making it ideal for yes/no toggles, preference selections, and other single-choice scenarios.

Usage ​

Composition api (script setup) ​

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

Options api ​

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

Basic Usage ​

Radio Group

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

  const selectedValue = ref('');

  const options = ref([
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
    { label: 'Option C', value: 'c' },
  ]);
</script>

<template>
  <FTRadioGroup v-model="selectedValue" :options="options" />
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { FTRadioGroup } from '@fasttrack-solutions/vue-components-lib';

  const selectedValue = ref('');

  const options = ref([
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
    { label: 'Option C', value: 'c' },
  ]);
</script>

<template>
  <FTRadioGroup v-model="selectedValue" :options="options" />
</template>

Boolean Values ​

Boolean Radio Group

Display as upcoming before start*
vue
<script setup lang="ts">
  import { ref } from 'vue';
  import { FTRadioGroup } from '@fasttrack-solutions/vue-components-lib';

  const selectedBool = ref(true);

  const options = ref([
    { label: 'Yes', value: true },
    { label: 'No', value: false },
  ]);
</script>

<template>
  <FTRadioGroup
    v-model="selectedBool"
    :options="options"
    label="Display as upcoming before start"
    :is-required="true"
  />
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { FTRadioGroup } from '@fasttrack-solutions/vue-components-lib';

  const selectedBool = ref(true);

  const options = ref([
    { label: 'Yes', value: true },
    { label: 'No', value: false },
  ]);
</script>

<template>
  <FTRadioGroup
    v-model="selectedBool"
    :options="options"
    label="Display as upcoming before start"
    :is-required="true"
  />
</template>

Number Values ​

Number Radio Group

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

  const selectedNumber = ref(1);

  const options = ref([
    { label: 'Low', value: 1 },
    { label: 'Medium', value: 2 },
    { label: 'High', value: 3 },
  ]);
</script>

<template>
  <FTRadioGroup
    v-model="selectedNumber"
    :options="numberOptions"
    label="Priority level"
  />
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { FTRadioGroup } from '@fasttrack-solutions/vue-components-lib';

  const selectedNumber = ref(1);

  const options = ref([
    { label: 'Low', value: 1 },
    { label: 'Medium', value: 2 },
    { label: 'High', value: 3 },
  ]);
</script>

<template>
  <FTRadioGroup
    v-model="selectedNumber"
    :options="numberOptions"
    label="Priority level"
  />
</template>

Required Field ​

Required Radio Group

Choose an option*
vue
<template>
  <FTRadioGroup
    v-model="selectedValue"
    :options="options"
    label="Choose an option"
    :is-required="true"
  />
</template>
<template>
  <FTRadioGroup
    v-model="selectedValue"
    :options="options"
    label="Choose an option"
    :is-required="true"
  />
</template>

Disabled State ​

Entire Component Disabled ​

Disabled Radio Group

Choose an option
vue
<template>
  <FTRadioGroup
    v-model="selectedValue"
    :options="options"
    label="Choose an option"
    :disabled="true"
  />
</template>
<template>
  <FTRadioGroup
    v-model="selectedValue"
    :options="options"
    label="Choose an option"
    :disabled="true"
  />
</template>

Individual Options Disabled ​

Radio Group with Disabled Options

Select an option
vue
<script setup lang="ts">
  import { ref } from 'vue';
  import { FTRadioGroup } from '@fasttrack-solutions/vue-components-lib';

  const selectedValue = ref('');

  const options = ref([
    { label: 'Available', value: 'available' },
    { label: 'Unavailable', value: 'unavailable', disabled: true },
    { label: 'Also Available', value: 'also-available' },
  ]);
</script>

<template>
  <FTRadioGroup
    v-model="selectedValue"
    :options="options"
    label="Select an option"
  />
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { FTRadioGroup } from '@fasttrack-solutions/vue-components-lib';

  const selectedValue = ref('');

  const options = ref([
    { label: 'Available', value: 'available' },
    { label: 'Unavailable', value: 'unavailable', disabled: true },
    { label: 'Also Available', value: 'also-available' },
  ]);
</script>

<template>
  <FTRadioGroup
    v-model="selectedValue"
    :options="options"
    label="Select an option"
  />
</template>

Props ​

NameTypeDefaultDescription
optionsArray<FTRadioGroupOption>[]Array of options to display
labelStringundefinedLabel text displayed above the radio group
isRequiredBooleanfalseShows a red asterisk (*) next to the label when true
disabledBooleanfalseDisables all options when true
modelValueString | Boolean | NumberundefinedThe currently selected value (used with v-model)

FTRadioGroupOption Interface ​

typescript
interface FTRadioGroupOption {
  label: string;
  value: string | boolean | number;
  disabled?: boolean;
}
interface FTRadioGroupOption {
  label: string;
  value: string | boolean | number;
  disabled?: boolean;
}

Styling ​

The component supports CSS custom properties for theming:

CSS VariableDefaultDescription
--ft-radio-group-label-colorvar(--color-mono-700)Color of the group label
--ft-radio-group-required-colorvar(--color-brand-pink-400)Color of the required asterisk
--ft-radio-group-gap16pxSpacing between radio options
--ft-radio-group-option-colorvar(--color-mono-700)Color of option label text
--ft-radio-group-circle-size20pxSize of the radio circle
--ft-radio-group-circle-border-colorvar(--color-mono-500)Border color of unselected circle
--ft-radio-group-circle-active-colorvar(--color-brand-blue-400)Fill and border color of selected circle
--ft-radio-group-circle-disabled-colorvar(--color-mono-400)Circle color when disabled

Copyright © Fast Track Solutions