Skip to main content

Select

TkSelect component description.

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

Playground​

Preview

Generated Code

<TkSelect
  options={[{"label":"Option 1","value":"1"},{"label":"Option 2","value":"2"},{"label":"Option 3","value":"3"}]}
  label="Select Option"
  placeholder="Choose..."
  size="base"
  dropdownWidthMode="match-parent"
  emptyMessage="No options available"
  selectAllLabel="All"
/>
<TkSelect
  :options="[{"label":"Option 1","value":"1"},{"label":"Option 2","value":"2"},{"label":"Option 3","value":"3"}]"
  label="Select Option"
  placeholder="Choose..."
  size="base"
  dropdownWidthMode="match-parent"
  emptyMessage="No options available"
  selectAllLabel="All"
/>
<tk-select
  [options]="[{"label":"Option 1","value":"1"},{"label":"Option 2","value":"2"},{"label":"Option 3","value":"3"}]"
  label="Select Option"
  placeholder="Choose..."
  size="base"
  dropdownWidthMode="match-parent"
  emptyMessage="No options available"
  selectAllLabel="All"
/>

Controls

Basic​

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

Size​

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

View Code
<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)}
/>

Filter​

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


View Code
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>
  );

Mask​

With editable, the text typed into the select input can be masked through the maskOptions prop. It accepts the same IInputMaskOptions as tk-input: any Cleave.js option (dates, numbers, fixed blocks, ...) or a regex that is validated as the user types. Filtering runs on the masked text, and with allowCustomValue the masked text becomes the value.


View Code
<TkSelect
  editable
  label="Flight Number"
  placeholder="TK1234"
  options={flights}
  maskOptions={{ regex: /^[A-Z]{0,2}[0-9]{0,4}$/ }}
  value={value}
  onTkChange={(e) => setValue(e.detail)}
/>
<TkSelect
  editable
  allowCustomValue
  label="Departure Date"
  placeholder="dd.mm.YYYY"
  options={dates}
  maskOptions={{
    date: true,
    delimiter: ".",
    datePattern: ["d", "m", "Y"],
  }}
  value={value1}
  onTkChange={(e) => setValue1(e.detail)}
/>

Loading​

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

View Code
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>
  );

Custom Item​

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

View Code
<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)}
/>

Panel Header​

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

View Code
<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; background-color: var(--background-lightest); 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');
    });
    tkButton.fullWidth = true;
    div.style.justifySelf = 'center';
    div.style.width = '100%';
    div.style.padding = '2px';
    div.appendChild(tkButton);
    return div;
  }}
  value={secondValue}
  optionValueKey="value"
  onTkChange={e => setSecondValue(e.detail)}
/>

Multiple Select​

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

Select All​

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

With showSelectAllChip set to true, the selection collapses into a single chip labelled with selectAllLabel once every option is selected, instead of listing every chip. It has no effect when allowCustomValue is true, because a custom value can put the selection outside the option list and the collapsed chip cannot represent that; every selected value keeps its own chip instead.


Select All Event: false
View Code
  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="All"
  multiple
  selectAll={true}
  showSelectAllChip={true}
  onTkSelectAll={handleSelectAll}
/>
 <div>Selected All: { selectAll ? 'true' : 'false' }</div>

Visible Item Count​

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


View Code
<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"
/>

OptionValueKey​

Allows usage of Key for option values.

Selected Key's value:

Selected Object's value:

View Code
 
  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>
  );

Icon​

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

View Code
<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"
/>

Clearable​

This example clears the input of the select.

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

Grouped Options​

Display options under section headers using groupNameKey and groupOptionsKey.

View Code
<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"
/>

Chip Options​

Sets options for all chips rendered in multiple selection mode.

View Code
<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',
    }}
/>

Option Disabled​

Sets disabled state for specific options using optionDisabled prop.

View Code
<TkSelect
    label="Disable Options"
    multiple
    selectAll
    editable
    clearable
  options={[
    { value: "female", label: "Female" },
    { value: "male", label: "Male" },
    { value: "other", label: "Other" },
  ]}
  optionDisabled={option => {
    if (option.value === 'female' || option.value === 'male') return true;
  }}
  hint="Hint text"
/>

Hide Disabled Chips​

In multiple mode, selected options that optionDisabled marks as disabled are still listed as chips, without a remove button. Set hideDisabledChips to true to leave them out of the input. They stay in value, keep their place when other chips are added or removed, survive clearing, and are submitted with the form. They remain visible as checked, disabled rows in the dropdown.


View Code
const [value, setValue] = useState(['ist', 'izm']);

<TkSelect
  label="Destinations"
  multiple
  clearable
  hideDisabledChips
  optionValueKey="value"
  options={[
    { value: 'ist', label: 'Istanbul' },
    { value: 'ank', label: 'Ankara' },
    { value: 'izm', label: 'Izmir' },
    { value: 'ant', label: 'Antalya' },
  ]}
  optionDisabled={option => option.value === 'ist'}
  value={value}
  onTkChange={e => setValue(e.detail)}
/>

State​

This demo showcases the disabled, invalid and loading states of the select component.

View Code
<TkSelect label="Error" options={options} value={value} error="Bu alan zorunludur" invalid/>
<TkSelect label="Readonly" options={options} value={value} readonly />
<TkSelect label="Disabled" options={options} value={value} disabled />

API​

Props​

NameTypeDefaultDescription
booleanfalseEnables users to enter custom values that are not part of the predefined options.
IChipOptionsnullSets options for all chips rendered in multiple selection mode.
booleanfalseIndicates whether the input can be cleared
booleanfalseIf 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'.
booleanfalseThis property determines whether the input field within the select box is editable.
string'Nooptionsavailable'The message to display when there is no data available.
stringnullThis is the error message that will be displayed.
Functionthis.defaultFilterFunction used to filter current options based on the input value. Comes with a default filter function, but can be overridden with a custom function.
number0Sets 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.
booleanfalseIn multiple mode, hides the chips of selected options that optionDisabled disables. They stay in value and are submitted.
stringnullProvided a hint or additional information about the input.
IIconOptions, stringnullThe icon displayed in the select box.
booleanfalseIndicates whether the input is in an invalid state
stringnullDefines the label for the element.
booleanfalseRepresents whether the options are fethecd from service or not. If true renders spinner in options dropdown.
IInputMaskOptionsnullMasking configuration applied to the text the user types into the select input, using the same IInputMaskOptions as tk-input (Cleave.js options or a regex). It only takes effect when the input is editable, and it is not applied in multiple mode, where the input renders chips instead of a masked text field.
booleannullIf true the user can make multiple selections.
stringnullThe name of the control, which is submitted with the form data.
FunctionnullA function to determine whether an option should be disabled.
FunctionnullProvides a function to customize the options.
string'label'The key to use for option labels
stringnullThe key to use for option values
any[]nullThe list of options to be displayed in the select box.
FunctionnullProvides a function to customize the panel top content.
stringnullPlaceholder text displayed when the input is empty.
booleanfalseIf true, the user cannot modify the value.
booleanfalseIf true enables selectAll option
string'All'Sets the label of the selectAll option
booleanfalseDisplays a red asterisk (*) next to the label for visual emphasis.
booleanfalseIf true, collapses the selection into a single chip labelled with selectAllLabel once every option is selected.
"base", "large", "small"'base'Sets size for the component.
anynullThe value of the input.
numbernullThe number of items to show in the collapsed select before listing +N others.

Events​

NameDescription
tk-changeEmitted when the value has changed.
tk-closeEmitted when the select is closed
tk-openEmitted when the select is opened
tk-select-allEmitted when the selectAll option is changed

Methods​

NameTypeDescription
closeclose() => Promise<void>Closes the select dropdown;

Slots​

NameDescription
empty-dataSet how the dropdown will appear when there is no data