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

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

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; 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)}
/>

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

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

State​

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 />

Select All​

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


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="Select All"
  multiple
  selectAll={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"
/>

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.
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.
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.
"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

Slots​

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