Select Status

Select status is a component that allows the user to select a status from a list of options.

Basic Usage

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

  import SelectStatus, { SelectStatusOption } from '../../../src/components/SelectStatus/SelectStatus.vue';

  const statuses: SelectStatusOption[] = [
    {
      id: 1,
      name: 'Active',
      color: 'green-500',
    },
    {
      id: '2nd',
      name: 'Inactive',
      color: 'red-500',
    },
    {
      id: 'submitted',
      name: 'Submitted',
      color: 'ice-500',
    },
    {
      id: 2,
      name: 'Fulfilled',
      color: 'blue-500',
    },
    {
      id: 3,
      name: 'Shipped',
      color: 'blue-700',
    },
    {
      id: 4,
      name: 'Returned',
      color: 'yellow-500',
    },
    {
      id: 5,
      name: 'Completed',
      color: 'ice-700',
    },
    {
      id: 6,
      name: 'Pending',
      color: 'ice-200',
    },
    {
      id: 7,
      name: 'Pending Additional Review',
      color: 'green-500',
    },
  ];

  const selected = ref(statuses[0].id);
</script>

<template>
  <SelectStatus v-model="selected" style="width: 200px" :status-options="statuses" label="Status" />
</template>

Custom option icons

You can customize the icon of each option by providing a icon property to the option object.

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

  import SelectStatus, { SelectStatusOption } from '../../../src/components/SelectStatus/SelectStatus.vue';

  const statuses: SelectStatusOption[] = [
    {
      id: 1,
      name: 'New Customer',
      color: 'green-500',
      icon: 'plus',
    },
    {
      id: 2,
      name: 'Bad Customer',
      color: 'red-500',
      icon: 'circle-warning',
    },
    {
      id: 3,
      name: 'Good Customer',
      color: 'ice-500',
      icon: 'check',
    },
  ];

  const selected = ref(statuses[0].id);
</script>

<template>
  <SelectStatus v-model="selected" :status-options="statuses" />
</template>

Preventing truncation

By default, the status display value will be truncated if it is too long. You can prevent this by setting the noTruncate property to true.

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

  import SelectStatus, { SelectStatusOption } from '../../../src/components/SelectStatus/SelectStatus.vue';

  const statuses: SelectStatusOption[] = [
    {
      id: 1,
      name: 'Active',
      color: 'green-500',
    },
    {
      id: '2nd',
      name: 'Inactive',
      color: 'red-500',
    },
    {
      id: 'submitted',
      name: 'Submitted',
      color: 'ice-500',
    },
    {
      id: 2,
      name: 'Fulfilled',
      color: 'blue-500',
    },
    {
      id: 3,
      name: 'Shipped To Customer',
      color: 'blue-700',
    },
    {
      id: 6,
      name: 'A Very Long Option That Wraps Onto Three Lines',
      color: 'orange-500',
    },
    {
      id: 7,
      name: 'An Even Longer Option That Will Wrap and Wrap Onto Four Lines',
      color: 'yellow-500',
    },
    {
      id: 8,
      name: 'The Longest Option Yet, Defying All Naysayers and Wrapping Onto Five Lines!',
      color: 'teal-500',
    },
    {
      id: 9,
      name: 'Option with >>                    << 20 spaces',
      color: 'black',
    },
  ];

  const selected = ref(statuses[0].id);
</script>

<template>
  <SelectStatus v-model="selected" style="width: 200px" no-truncate :status-options="statuses" />
</template>

Disabled

You can disable the select status by setting the disabled property.

<SelectStatus disabled v-model="selected" :status-options="statuses" />

Secondary Variant

You can use the secondary property to use the option color as the selected background.

<SelectStatus secondary v-model="selected" :status-options="statuses" />

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

• SelectStatus