Select

TkSelect component description.

React
Vue
Angular

import { TkSelect } from '@takeoff-ui/react'

import { TkSelect } from '@takeoff-ui/vue'

import { TkSelect } from '@takeoff-ui/angular'

Basic

View Code

React
Vue
Angular

<TkSelect
  label="Text Input"
  options={[
    { value: "female", label: "Female" },
    { value: "male", label: "Male" },
    { value: "other", label: "Other" },
  ]}
  hint="Hint text"
  placeholder="Placeholder text"
/>

<TkSelect
  label="Text Input"
  :options.prop="[
    { value: 'female', label: 'Female' },
    { value: 'male', label: 'Male' },
    { value: 'other', label: 'Other' },
  ]"
  hint="Hint text"
  placeholder="Placeholder text"
/>

Filter

You can perform filtering either server-side or client-side using the filter emit.

View Code

React
Vue
Angular

const selectOptions = [
    { value: "female", label: "Female", searchField: "XX" },
    { value: "male", label: "Male", searchField: "XY" },
    { value: "other", label: "Other", searchField: "00" },
  ];

  const [value, setValue] = useState();
  const [value1, setValue1] = useState();
    
  return (
    <div>
      <TkSelect
        editable
        label="Default Filter"
        options={selectOptions}
        value={value}
        onTkChange={(e) => setValue(e.detail)}
      />
      <br />
      <TkSelect
        editable
        label="Custom Filter Function"
        options={selectOptions}
        filter={async (text: string, options: any[]) => {
          return options.filter(
            (item) =>
              item.searchField.toLowerCase().indexOf(text.toLowerCase()) > -1
          );
        }}
        value={value1}
        onTkChange={(e) => setValue1(e.detail)}
      />
    </div>
  );

<script setup>
import { TkSelect } from '@takeoff-ui/vue';

const selectOptions = [
  { value: 'female', label: 'Female', searchField: 'XX' },
  { value: 'male', label: 'Male', searchField: 'XY' },
  { value: 'other', label: 'Other', searchField: '00' },
];
</script>

<template>
  <div>
  <TkSelect
      editable
      label="Default Filter"
      :options.prop="selectOptions"
    />
    <TkSelect
      editable
      label="Custom Filter Function"
      :options.prop="selectOptions"
      filter="async (text: string, options: any[]) => {
        return options.filter(
          (item) =>
            item.searchField.toLowerCase().indexOf(text.toLowerCase()) > -1
        );
      }"
    />
  </div>
</template>

Loading

You can use loading prop for waiting the response from the server-side.

View Code

React
Vue
Angular

const selectOptions = [
    { value: "female", label: "Female"},
    { value: "male", label: "Male"},
    { value: "other", label: "Other"},
  ];

  const [value, setValue] = useState();
  const [loading, setLoading] = useState(false);
   
  const fetchData = async (text: string) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        let response;
        response = options.filter(
          (item) => item.label?.toLowerCase().indexOf(text?.toLowerCase()) > -1
        );

        resolve(response);
      }, 2000);
    });
  };

  return (
    <div>
      <TkSelect
        editable
        label="Loading Prop"
        loading={loading}
        options={selectOptions}
        filter={async (text: string, selectOptions: any[]) => {
          setLoading(true);
          const response = await fetchData(text);
          setLoading(false);
          return response;
        }}
        value={value}
        onTkChange={(e) => {
          setValue(e.detail);
        }}
      />
    </div>
  );

<script setup>
import { TkSelect } from '@takeoff-ui/vue';
import { ref } from "vue"

const selectOptions = [
  { value: 'female', label: 'Female'},
  { value: 'male', label: 'Male'},
  { value: 'other', label: 'Other'},
];
 
const fetchData = async (text) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      let response;
      response = selectOptions.filter(
        (item) => item.label?.toLowerCase().indexOf(text?.toLowerCase()) > -1
      );
      resolve(response);
    }, 2000);
  });
};
const loading= ref(false)
</script>

<template>
  <div>
    <TkSelect
      editable
      label="Loading Prop"
      :loading="loading"
      :options.prop="selectOptions"
      :filter.prop="async (text) => {
        loading=!loading
        const response = await fetchData(text);
        loading=!loading
        return response;
      }"
      :value.prop="value"
    />
  </div>
</template>

Custom Item

You can provide a template as an HTML string using the optionHtml prop.

View Code

React
Vue
Angular

<TkSelect
  label="Custom Item"
  optionLabelKey="name"
  optionValueKey="code"
  options={[
    {
      code: "SAW",
      name: "Sabiha Gökçen Havalimanı",
      country: "İstanbul",
    },
    { code: "ESB", name: "Esenboğa Havalimanı", country: "Ankara" },
    { code: "AYT", name: "Antalya Havalimanı", country: "Antalya" },
  ]}
  optionHtml={(item) => {
    return `<div style="display: flex; flex-direction: column;">
                <div style="displaY: flex;justify-content: space-between;">
                    <div style="font-weight: bold;">${item.name}</div>
                    <div style="color: var(--primary-base)">${item.code}</div>
                </div>
                <div>${item.country}</div>
            </div>`;
  }}
  value={value}
  onTkChange={(e) => setValue(e.detail)}
/>

<TkSelect 
  label="Custom Item" 
  optionLabelKey="name" 
  optionValueKey="code" 
  :options.prop="[
    { code: 'SAW', name: 'Sabiha Gökçen Havalimanı', country: 'İstanbul' },
    { code: 'ESB', name: 'Esenboğa Havalimanı', country: 'Ankara' },
    { code: 'AYT', name: 'Antalya Havalimanı', country: 'Antalya' },
  ]" :optionHtml.prop="(item) => {
    return `<div style='display: flex; flex-direction: column;'>
        <div style='display: flex;justify-content: space-between;'>
          <div style='font-weight: bold;'>${item.name}</div>
          <div style='color: var(--primary-base)'>${item.code}</div>
          </div>
          <div>${item.country}</div>
        </div>`;
    }"
  v-model="value"
/>

Panel Header

You can customize top of the select panel using panelTopHtml prop.

View Code

React
Vue
Angular

<TkSelect
  label="Select With Top Panel"
  options={[
    { value: "female", label: "Female" },
    { value: "male", label: "Male" },
    { value: "other", label: "Other" },
  ]}
  panelTopHtml={() => {
    return `<div style="display: flex; align-items:center; gap:4px; padding: 10px 10px; border: 1px solid var(--border-light, #E1E4EA); border-radius: 8px;">
              <tk-icon icon="person"></tk-icon>
              <span style="font-size:14px">Choose your gender</span>
            </div>`;
  }}
  value={value}
  optionValueKey="value"
  onTkChange={(e) => setValue(e.detail)}
/>
<TkSelect
  label="Button in Panel Header"
  options={[
    { value: 'female', label: 'Female' },
    { value: 'male', label: 'Male' },
    { value: 'other', label: 'Other' },
  ]}
  panelTopHtml={() => {
    const div: HTMLDivElement = document.createElement('div');
    const tkButton: HTMLTkButtonElement = document.createElement('tk-button');
    tkButton.label = 'Set Male';
    tkButton.addEventListener('tk-click', () => {
      setSecondValue('male');
    });
    div.style.justifySelf = 'center';
    div.style.padding = '2px';
    div.appendChild(tkButton);
    return div;
  }}
  value={secondValue}
  optionValueKey="value"
  onTkChange={e => setSecondValue(e.detail)}
/>

<TkSelect
  label="Select With Top Panel"
  :options.prop="[
    { value: 'female', label: 'Female' },
    { value: 'male', label: 'Male' },
    { value: 'other', label: 'Other' },
  ]"
  :panelTopHtml.prop="() => {
    return `<div style="display: flex; align-items:center; gap:4px; padding: 10px 10px; border: 1px solid var(--border-light, #E1E4EA); border-radius: 8px;">
              <tk-icon icon="person"></tk-icon>
              <span style="font-size:14px">Choose your gender</span>
            </div>`;
  }"
  v-model="value"
/>
<TkSelect
  label="Button in Panel Header"
  :options.prop={[
    { value: 'female', label: 'Female' },
    { value: 'male', label: 'Male' },
    { value: 'other', label: 'Other' },
  ]}
  :panelTopHtml.prop="() => {
    const div: HTMLDivElement = document.createElement('div');
    const tkButton: HTMLTkButtonElement = document.createElement('tk-button');
    tkButton.label = 'Set Male';
    tkButton.addEventListener('tk-click', () => {
      setSecondValue('male');
    });
    div.style.justifySelf = 'center';
    div.style.padding = '2px';
    div.appendChild(tkButton);
    return div;
  }"
  v-model="secondValue"
  optionValueKey="value"

/>

Multiple Select

View Code

React
Vue
Angular

<TkSelect
  label="Multiple Input"
  multiple
  options={[
    { value: "female", label: "Female" },
    { value: "male", label: "Male" },
    { value: "other", label: "Other" },
  ]}
  hint="Hint text"
/>

<script setup>
import { TkSelect } from '@takeoff-ui/vue';
import { ref } from 'vue';

const selectValue = ref([{ value: 'female', label: 'Female' }]);
</script>
<template>
  <TkSelect
    label="Multiple Input"
    v-model="selectValue"
    :options.prop="[
      { value: 'female', label: 'Female' },
      { value: 'male', label: 'Male' },
      { value: 'other', label: 'Other' },
    ]"
    multiple
    hint="Hint text"
  />
</template>

Size

The "size" prop can be used with one of the sizes "small", "base", and "large". The default value is "base".

View Code

React
Vue
Angular

<TkSelect
  label="Text Input"
  options={[
    { value: "female", label: "Female" },
    { value: "male", label: "Male" },
    { value: "other", label: "Other" },
  ]}
  hint="Hint text"
  placeholder="Placeholder text"
  size="small"
  value={value}
  onTkChange={(e) => setValue(e.detail)}
/>
<TkSelect
  label="Text Input"
  options={[
    { value: "female", label: "Female" },
    { value: "male", label: "Male" },
    { value: "other", label: "Other" },
  ]}
  hint="Hint text"
  placeholder="Placeholder text"
  size="base"
  value={value1}
  onTkChange={(e) => setValue1(e.detail)}
/>
<TkSelect
  label="Text Input"
  options={[
    { value: "female", label: "Female" },
    { value: "male", label: "Male" },
    { value: "other", label: "Other" },
  ]}
  hint="Hint text"
  placeholder="Placeholder text"
  size="large"
  value={value2}
  onTkChange={(e) => setValue2(e.detail)}
/>

<TkSelect
  label="Text Input"
  :options.prop="[
    { value: 'female', label: 'Female' },
    { value: 'male', label: 'Male' },
    { value: 'other', label: 'Other' },
  ]"
  hint="Hint text"
  placeholder="Placeholder text"
  size="small"
  v-model="value"
/>
<TkSelect
  label="Text Input"
  :options.prop="[
    { value: 'female', label: 'Female' },
    { value: 'male', label: 'Male' },
    { value: 'other', label: 'Other' },
  ]"
  hint="Hint text"
  placeholder="Placeholder text"
  size="base"
  v-model="value1"
/>
<TkSelect
  label="Text Input"
  :options.prop="[
    { value: 'female', label: 'Female' },
    { value: 'male', label: 'Male' },
    { value: 'other', label: 'Other' },
  ]"
  hint="Hint text"
  placeholder="Placeholder text"
  size="large"
  v-model="value2"
/>

State

View Code

React
Vue
Angular

<TkSelect
  label="Error"
  placeholder="Error"
  invalid={true}
  error="Bu alan zorunludur"
/>
<TkSelect label="Readonly" placeholder="Readonly" readonly />
<TkSelect label="Disabled" placeholder="Disabled" disabled />

<TkSelect
  label="Error"
  placeholder="Error"
  :invalid="true"
  error="Bu alan zorunludur"
/>
<TkSelect label="Readonly" placeholder="Readonly" readonly />
<TkSelect label="Disabled" placeholder="Disabled" disabled />

Select All

You can add selectAll option and edit the label via selectAllLabel.

Select All Event: false

View Code

React
Vue
Angular

  const handleSelectAll = e => {
    const selected = e.detail;
    setSelectAll(selected);
  };

<TkSelect
  label="Select All"
  options={[
    { value: "female", label: "Female" },
    { value: "male", label: "Male" },
    { value: "other", label: "Other" },
  ]}
  selectAllLabel="Select All"
  multiple
  selectAll={true}
  onTkSelectAll={handleSelectAll}
/>
 <div>Selected All: { selectAll ? 'true' : 'false' }</div>

<script setup>
import { TkSelect } from '@takeoff-ui/vue';
import { ref } from 'vue';

const selectAll = ref(false);
const handleSelectAll = e => {
  selectAll.value = e.detail;
};
</script>

<template>
 <TkSelect
  label="Select All"
  :options.prop="[
    { value: 'female', label: 'Female' },
    { value: 'male', label: 'Male' },
    { value: 'other', label: 'Other' },
  ]"
  selectAllLabel="Select All"
  :selectAll.prop="true"
  multiple
  @tk-select-all="handleSelectAll"
/>

 <div>Selected All: {{ selectAll ? 'true' : 'false' }}</div>
</template>

Visible Item Count

Controls how many selected items are displayed before showing "+N others" in multiple selection mode.

View Code

React
Vue
Angular

<TkSelect
  label="Select with Visible Item Count"
  placeholder="Select multiple options"
  multiple
  visibleItemCount={3}
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
    { value: "3", label: "Option 3" },
    { value: "4", label: "Option 4" },
    { value: "5", label: "Option 5" },
    { value: "6", label: "Option 6" },
    { value: "7", label: "Option 7" },
    { value: "8", label: "Option 8" },
  ]}
  hint="Only 3 items will be visible before showing +N others"
/>

<script setup>
import { TkSelect } from '@takeoff-ui/vue';
import { ref } from 'vue';

const selectValue = ref([]);
</script>
<template>
  <TkSelect
    label="Select with Visible Item Count"
    placeholder="Select multiple options"
    v-model="selectValue"
    :options.prop="[
      { value: '1', label: 'Option 1' },
      { value: '2', label: 'Option 2' },
      { value: '3', label: 'Option 3' },
      { value: '4', label: 'Option 4' },
      { value: '5', label: 'Option 5' },
      { value: '6', label: 'Option 6' },
      { value: '7', label: 'Option 7' },
      { value: '8', label: 'Option 8' },
    ]"
    multiple
    :visible-item-count="3"
    hint="Only 3 items will be visible before showing +N others"
  />
</template>

import { Component } from '@angular/core';

@Component({
  selector: 'app-visible-item-count',
  template: `
    <tk-select
      label="Select with Visible Item Count"
      placeholder="Select multiple options"
      [multiple]="true"
      [visibleItemCount]="3"
      [options]="options"
      [(ngModel)]="value"
      hint="Only 3 items will be visible before showing +N others">
    </tk-select>
  `
})
export class VisibleItemCountComponent {
  value = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' }
  ];
  
  options = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' },
    { value: '4', label: 'Option 4' },
    { value: '5', label: 'Option 5' },
    { value: '6', label: 'Option 6' },
    { value: '7', label: 'Option 7' },
    { value: '8', label: 'Option 8' }
  ];
}

OptionValueKey

Allows usage of Key for option values.

Selected Key's value:

Selected Object's value:

View Code

React
Vue
Angular

 
  const selectOptions = [
    {value: "female", label: "Female", symbol:"XX" },
    {value: "male", label: "Male", symbol: "XY" },
    {value: "other", label: "Other", symbol: "00" },
  ];
  const [selectValue, setSelectValue]=useState();
  const [selectObjectValue, setObjectSelectValue]=useState();

  return(
    <TkSelect
      editable
      label="Key Value Select"
      value={selectValue}
      options={selectOptions}
      optionValueKey="symbol"
      onTkChange={(e)=>{
        setSelectValue(e.detail);
      }}
    />
    p><b>Selected Key's value:</b> {selectValue}</p>
    <TkSelect
        editable
        label="Object Value Select"
        options={selectOptions}
        onTkChange={(e)=>{
          setObjectSelectValue(e.detail);
        }}
    />
    <p><b>Selected Key's value:</b> {JSON.stringify(selectObjectValue)}</p>
  );

<script setup>
  import { TkSelect } from '@takeoff-ui/vue';
  import { ref } from 'vue';

  const selectOptions = [
    {value: "female", label: "Female",symbol:"XX" },
    {value: "male", label: "Male",symbol: "XY" },
    {value: "other", label: "Other",symbol: "00"},
  ];
  const selectKeyValue = ref(null);
  const selectObjectValue = ref(null);

  </script>
  <template>
    <div>
      <TkSelect
        editable
        label="Key Value Select"
        :options.prop="selectOptions"
        optionValueKey="symbol"
        v-model="selectKeyValue"
      />
      <p><b>Selected Key's value:</b> {{ selectKeyValue }}</p>
    <TkSelect
        editable
        label="Key Value Select"
        :options.prop="selectOptions"
        v-model="selectObjectValue"
      />
      <p><b>Selected Object's value:</b> {{ selectObjectValue }}</p>
    </div>
  </template>
  

Icon

You can use the icon prop to add an icon to the select input.

View Code

React
Vue
Angular

<TkSelect
  icon={{ name: 'key', color: 'red' }}
  label="Text Input"
  options={[
    { value: "female", label: "Female" },
    { value: "male", label: "Male" },
    { value: "other", label: "Other" },
  ]}
  hint="Hint text"
  placeholder="Placeholder text"
/>

<TkSelect
  :icon= "{ name: 'key', color: 'red' }"
  label="Text Input"
  :options.prop="[
    { value: 'female', label: 'Female' },
    { value: 'male', label: 'Male' },
    { value: 'other', label: 'Other' },
  ]"
  hint="Hint text"
  placeholder="Placeholder text"
/>

Clearable

This example clears the input of the select.

View Code

React
Vue
Angular

<TkSelect label="Clearable Select" options={options} value="Option 1" clearable />

<TkSelect label="Clearable Select" :options.prop="options" value="Option 1" clearable />

Grouped Options

Display options under section headers using groupNameKey and groupOptionsKey.

View Code

React
Vue
Angular

<TkSelect
  label="Grouped Cities"
  placeholder="Select a city"
  options={[
    {
      groupName: 'Marmara',
      options: [
        { value: 'ankara', label: 'Ankara' },
        { value: 'istanbul', label: 'İzmir' },
        { value: 'izmir', label: 'İstanbul' },
      ],
    },
    {
      groupName: 'Batı Karadeniz',
      options: [
        { value: 'bolu', label: 'Bolu' },
        { value: 'bartin', label: 'Bartın' },
        { value: 'zonguldak', label: 'Zonguldak' },
      ],
    },
    {
      groupName: 'İç Anadolu',
      options: [
        { value: 'yozgat', label: 'Yozgat' },
        { value: 'kirikkale', label: 'Kırıkkale' },
      ],
    },
  ]}
  groupNameKey="groupName"
  groupOptionsKey="options"
  optionLabelKey="label"
  optionValueKey="value"
/>

<script setup>
import { TkSelect } from '@takeoff-ui/vue';
import { ref } from 'vue';

const selectValue = ref();
</script>
<template>
  <TkSelect
    label="Grouped Cities"
    placeholder="Select a city"
    v-model="selectValue"
    groupNameKey="groupName"
    groupOptionsKey="options"
    optionLabelKey="label"
    optionValueKey="value"
    :options.prop="[
      {
        groupName: 'Marmara',
        options: [
          { value: 'ankara', label: 'Ankara' },
          { value: 'istanbul', label: 'İzmir' },
          { value: 'izmir', label: 'İstanbul' }
        ]
      },
      {
        groupName: 'Batı Karadeniz',
        options: [
          { value: 'bolu', label: 'Bolu' },
          { value: 'bartin', label: 'Bartın' },
          { value: 'zonguldak', label: 'Zonguldak' }
        ]
      },
      {
        groupName: 'İç Anadolu',
        options: [
          { value: 'yozgat', label: 'Yozgat' },
          { value: 'kirikkale', label: 'Kırıkkale' }
        ]
      }
    ]"
  />
</template>

<tk-select
  label="Grouped Cities"
  placeholder="Select a city"
  [(value)]="value"
  [options]="[
    {
      groupName: 'Marmara',
      options: [
        { value: 'ankara', label: 'Ankara' },
        { value: 'istanbul', label: 'İzmir' },
        { value: 'izmir', label: 'İstanbul' }
      ]
    },
    {
      groupName: 'Batı Karadeniz',
      options: [
        { value: 'bolu', label: 'Bolu' },
        { value: 'bartin', label: 'Bartın' },
        { value: 'zonguldak', label: 'Zonguldak' }
      ]
    },
    {
      groupName: 'İç Anadolu',
      options: [
        { value: 'yozgat', label: 'Yozgat' },
        { value: 'kirikkale', label: 'Kırıkkale' }
      ]
    }
  ]"
  groupNameKey="groupName"
  groupOptionsKey="options"
  optionLabelKey="label"
  optionValueKey="value"
/>

Chip Options

Sets options for all chips rendered in multiple selection mode.

View Code

React
Vue
Angular

<TkSelect
    label="Test Chip Options"
    options={['Apple', 'Banana', 'Cherry']}
    multiple
    value={value}
    onTkChange={(e) => setValue(e.detail)}
    chipOptions={{
      icon: 'star',
      type: 'outlined',
      size: 'large',
      variant: 'success',
    }}
/>

<TkSelect
    label="Test Chip Options"
    :options.prop="['Apple', 'Banana', 'Cherry']"
    multiple
    v-model="value"
    :chipOptions="{
      icon: 'star',
      type: 'outlined',
      size: 'large',
      variant: 'success',
    }"
/>

API

Props

Type	Default	Description
`boolean`	false	Enables users to enter custom values that are not part of the predefined options.
`IChipOptions`	null	Sets options for all chips rendered in multiple selection mode.
`boolean`	false	Indicates whether the input can be cleared
`boolean`	false	If `true`, the user cannot interact with the input.
`string`	'match-parent'	Determines the width of the dropdown. Accepts values like 'match-parent', 'auto', or a specific width in '300px'.
`boolean`	false	This property determines whether the input field within the select box is editable.
`string`	'Nooptionsavailable'	The message to display when there is no data available.
`string`	null	This is the error message that will be displayed.
`Function`	this.defaultFilter	Function used to filter current options based on the input value. Comes with a default filter function, but can be overridden with a custom function.
`number`	0	Sets the delay (in ms) before triggering the filter function.
`string`	'label'	The key to use for option group names. Required if grouped options are used.
`string`	'options'	The key to use for accessing grouped options array. Required if grouped options are used.
`string`	null	Provided a hint or additional information about the input.
`IIconOptions, string`	null	The icon displayed in the select box.
`boolean`	false	Indicates whether the input is in an invalid state
`string`	null	Defines the label for the element.
`boolean`	false	Represents whether the options are fethecd from service or not. If true renders spinner in options dropdown.
`boolean`	null	If `true` the user can make multiple selections.
`string`	null	The name of the control, which is submitted with the form data.
`Function`	null	Provides a function to customize the options.
`string`	'label'	The key to use for option labels
`string`	null	The key to use for option values
`any[]`	null	The list of options to be displayed in the select box.
`Function`	null	Provides a function to customize the panel top content.
`string`	null	Placeholder text displayed when the input is empty.
`boolean`	false	If `true`, the user cannot modify the value.
`boolean`	false	If true enables selectAll option
`string`	'All'	Sets the label of the selectAll option
`boolean`	false	Displays a red asterisk (*) next to the label for visual emphasis.
`"base", "large", "small"`	'base'	Sets size for the component.
`any`	null	The value of the input.
`number`	null	The number of items to show in the collapsed select before listing `+N others`.

Events

Name	Description
tk-change	Emitted when the value has changed.
tk-select-all	Emitted when the selectAll option is changed

Slots

Name	Description
empty-data	Set how the dropdown will appear when there is no data

Basic​

Filter​

Loading​

Custom Item​

Panel Header​

Multiple Select​

Size​

State​

Select All​

Visible Item Count​

OptionValueKey​

Icon​

Clearable​

Grouped Options​

Chip Options​

API​

Props​

Events​

Slots​

Basic

Filter

Loading

Custom Item

Panel Header

Multiple Select

Size

State

Select All

Visible Item Count

OptionValueKey

Icon

Clearable

Grouped Options

Chip Options

API

Props

Events

Slots