HopeKit

Appearance

Return to top
On this page

Select

The select are a fundamental part of any project, with HopeKit you can add a select with a single line of code.

Basic Usage

The select have themes: default, transparent.

<template>
  <div class="grid grid-cols-2 gap-6 items-start">
    <HcSelect
      v-model="value1"
      :options="options"
      label="Default theme"
      placeholder="Select"
    />

    <HcSelect
      v-model="value2"
      :options="options"
      label="Transparent theme"
      placeholder="Select"
      theme="transparent"
    />
  </div>
</template>

<script lang="ts" setup>
import { SelectOption, HcSelect } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');

const options = ref<SelectOption[]>([
  {
    value: 'option_1',
    label: 'Option 1',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_2',
    label: 'Option 2',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_3',
    label: 'Option 3',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_4',
    label: 'Option 4',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_5',
    label: 'Option 5',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:aUZ6wROWsTv/logo-1640108628.png',
  },
  {
    value: 'option_6',
    label: 'Option 6',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:5df5e6e1650/logo-1637338094.png',
    disabled: true,
  },
]);
</script>

Sizes

The inputs have text sizes: small, medium. The inputs have sizes: small, medium.

<template>
  <div class="">
    <div class="grid grid-cols-2 gap-6 items-start">
      <HcSelect
        v-model="value1"
        :options="options"
        label="Medium text size"
        placeholder="Select"
        :max-length="50"
        text-size="medium"
      />

      <HcSelect
        v-model="value2"
        :options="options"
        label="Small text size"
        placeholder="Select"
        :max-length="50"
        text-size="small"
      />
    </div>

    <div class="mt-5">
      <HcSelect
        v-model="value3"
        :options="options"
        label="Medium size"
        placeholder="Select"
        :max-length="50"
        size="medium"
      />

      <HcSelect
        v-model="value4"
        :options="options"
        label="Small size"
        placeholder="Select"
        :max-length="50"
        size="small"
        class="mt-5"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { SelectOption, HcSelect } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const value4 = ref('');

const options = ref<SelectOption[]>([
  {
    value: 'option_1',
    label: 'Option 1',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_2',
    label: 'Option 2',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_3',
    label: 'Option 3',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_4',
    label: 'Option 4',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_5',
    label: 'Option 5',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:aUZ6wROWsTv/logo-1640108628.png',
  },
  {
    value: 'option_6',
    label: 'Option 6',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:5df5e6e1650/logo-1637338094.png',
    disabled: true,
  },
]);
</script>

Disabled & readonly

Change the state of the button to disabled with the disabled property, the property is a boolean so you can add it without any value.

Change the state of the button to readonly with the readonly property.

<template>
  <div class="grid grid-cols-2 gap-6 items-start">
    <HcSelect
      v-model="value1"
      :options="options"
      label="Disabled"
      placeholder="Select"
      disabled
    />

    <HcSelect
      v-model="value2"
      :options="options"
      label="Readonly"
      placeholder="Select"
      readonly
    />
  </div>
</template>

<script lang="ts" setup>
import { SelectOption, HcSelect } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');

const options = ref<SelectOption[]>([
  {
    value: 'option_1',
    label: 'Option 1',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_2',
    label: 'Option 2',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_3',
    label: 'Option 3',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_4',
    label: 'Option 4',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_5',
    label: 'Option 5',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:aUZ6wROWsTv/logo-1640108628.png',
  },
  {
    value: 'option_6',
    label: 'Option 6',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:5df5e6e1650/logo-1637338094.png',
    disabled: true,
  },
]);
</script>

Errors

Use props errorMsg to show error message or use prop boolean error to detarmitate error state of the component

This is an error message
<template>
  <div>
    <div class="grid grid-cols-2 gap-6 items-start">
      <HcSelect
        v-model="value1"
        :options="options"
        label="Error"
        placeholder="Select"
        error
      />

      <HcSelect
        v-model="value2"
        :options="options"
        label="Error message"
        placeholder="Select"
        error-msg="This is an error message"
      />
    </div>

    <div class="grid grid-cols-2 gap-6 items-start mt-5">
      <HcSelect
        v-model="value3"
        :options="options"
        label="Error and disabled"
        placeholder="Select"
        error
        disabled
      />

      <HcSelect
        v-model="value4"
        :options="options"
        label="Error and readonly"
        placeholder="Select"
        error
        readonly
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { SelectOption, HcSelect } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const value4 = ref('');

const options = ref<SelectOption[]>([
  {
    value: 'option_1',
    label: 'Option 1',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_2',
    label: 'Option 2',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_3',
    label: 'Option 3',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_4',
    label: 'Option 4',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_5',
    label: 'Option 5',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:aUZ6wROWsTv/logo-1640108628.png',
  },
  {
    value: 'option_6',
    label: 'Option 6',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:5df5e6e1650/logo-1637338094.png',
    disabled: true,
  },
]);
</script>

Multiple and clearable

Use props clearable to show clear button and allow user to clear modelValue. Use prop multiple to allow use select more that one option. Use multipleLimit with props multiple to determinate the max value of selected options.

<template>
  <div class="">
    <div class="grid grid-cols-2 gap-6 items-start mt-5">
      <HcSelect
        v-model="value1"
        :options="options"
        label="Clearable"
        placeholder="Select"
        clearable
      />

      <HcSelect
        v-model="value2"
        :options="options"
        label="Multiple"
        placeholder="Select"
        multiple
        :multiple-limit="5"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { SelectOption, HcSelect } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
const options = ref<SelectOption[]>([
  {
    value: 'option_1',
    label: 'Option 1',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_2',
    label: 'Option 2',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_3',
    label: 'Option 3',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_4',
    label: 'Option 4',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_5',
    label: 'Option 5',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:aUZ6wROWsTv/logo-1640108628.png',
  },
  {
    value: 'option_6',
    label: 'Option 6',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:5df5e6e1650/logo-1637338094.png',
    disabled: true,
  },
]);
</script>

Filterable

Filterable

<template>
  <div class="grid grid-cols-2 gap-6 items-start mt-5">
    <HcSelect
      v-model="value1"
      :options="options"
      placeholder="Enter to filter"
      filterable
    />
  </div>
</template>
<script lang="ts" setup>
import { SelectOption, HcSelect } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');

const options = ref<SelectOption[]>([
  {
    value: 'option_1',
    label: 'Option 1',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_2',
    label: 'Option 2',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_3',
    label: 'Option 3',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_4',
    label: 'Option 4',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_5',
    label: 'Option 5',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:aUZ6wROWsTv/logo-1640108628.png',
  },
  {
    value: 'option_6',
    label: 'Option 6',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:5df5e6e1650/logo-1637338094.png',
    disabled: true,
  },
]);
</script>

AllowCreate

AllowCreate

<template>
  <div class="grid grid-cols-2 gap-6 items-start mt-5">
    <HcSelect
      v-model="value1"
      :options="options"
      placeholder="Select"
      allow-create
      filterable
      create-label-text="Add option"
      :create-method="createMethod"
    />
  </div>
</template>
<script lang="ts" setup>
import { SelectOption, HcSelect } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');

const options = ref<SelectOption[]>([
  {
    value: 'option_1',
    label: 'Option 1',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_2',
    label: 'Option 2',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_3',
    label: 'Option 3',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_4',
    label: 'Option 4',
    imageUrl: 'https://media.istockphoto.com/photos/colored-powder-explosion-on-black-background-picture-id1057506940?k=20&m=1057506940&s=612x612&w=0&h=3j5EA6YFVg3q-laNqTGtLxfCKVR3_o6gcVZZseNaWGk=',
  },
  {
    value: 'option_5',
    label: 'Option 5',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:aUZ6wROWsTv/logo-1640108628.png',
  },
  {
    value: 'option_6',
    label: 'Option 6',
    imageUrl: 'https://storage.googleapis.com/hc-jetstream-assets/brand/jsb:5df5e6e1650/logo-1637338094.png',
    disabled: true,
  },
]);

const createMethod = (newValue: string) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const newOption = {
        value: newValue,
        label: newValue,
      };
      options.value.unshift(newOption);

      resolve(null);
    }, 1000);
  });
};
</script>

Types

SelectOptionValue = string | number | boolean;

SelectOption:

OptionType
idstring
labelstring
valueSelectOptionValue
imageUrlstring
disabledboolean

Props

PropertyType Values Description Default
idStringStringnative 'id' attribute
modelValueStringStringbinding valuefalse
optionsSelectOption[]SelectOption[]items of select[]
labelStringStringlabel text
placeholderStringStringplaceholder text
errorBooleanBooleandetermine if the component has error and change its style to that state.false
errorMsgStringStringerror message
disabledBooleanBooleanwhether component is disabledfalse
readonlyBooleanBooleanwhether component is read onlyfalse
imageTypeStringsquarecircleimage style in optionsquare
filterableBooleanBooleanwhether options are filterablefalse
allowCreateBooleanBooleanwhether allow to create item in selectfalse
createLabelTextStringStringcreate text in option (use when `allowCreate` is true)Add
createMethodFunctionFunctioncreate methodundefined
clearablebooleantruefalsewhether show clearable buttonfalse
themeStringdefaulttransparentcomponent themedefault
noDataTextStringStringtext in popover when there are no optionsNo date
popperClassStringStringcustom popper class
noMatchTextStringStringtext in popover when filterable and there are no optionsNo date
teleportedbooleantruefalsewhether poopver is teleported to bodytrue
loadingbooleantruefalsewhether is options loadingfalse
remotebooleantruefalseis remote search activetrue
remoteMethodFunctionFunctionremote methodundefined
filterMethodFunctionFunctionfilter methodundefined
valueKeyStringStringvalueKeyvalue
sizeStringsmallmediumcomponent sizemedium
textSizeStringsmallmediumcomponent field text sizesmall
multiplebooleantruefalsewhether use can select more that one optionfalse
multipleLimitNumberNumberamount of options that user can seelct (when multiple is true)1

Slots

PropertyType Values Description Default
label-suffix-customize label suffix content

Events

PropertyType Values Description Default
update:model-valueFunctionvalue - SelectOptionValuetriggers when the selected value changes
changeFunctionvalue - SelectOptionValuetriggers when the selected value changes
clearFunction-triggers when the clear icon is clicked in a clearable Select
focusFunction-triggers when Select focuses
blurFunction-triggers when Select blurs
visible-changeFunctionvalue - booleantriggers when the dropdown appears/disappears
load-moreFunction-triggers when scroll in dropdown to bottom

Created by DeepVision Software.

Copyright © DeepVision