Components

Smart Select

LyteNyte Grid's smart select component is a versatile combobox that supports single and multiple selection and asynchronous loading.

The SmartSelect component is a hybrid, headless combobox and select component. The selection list uses a single, unified list box, while the selection trigger can be either a select trigger or a combobox trigger.

Single Select

The simplest variant of the SmartSelect component is the single select variant. Set the kind property to "basic" and the trigger property to SmartSelect.BasicTrigger to use the SmartSelect component in basic select mode.

The demo below demonstrates this configuration. The value and options properties are required. Each SmartSelect option must have a unique ID.

Basic Single Select

demo.tsx


5 collapsed lines
1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { SmartSelect } from "@1771technologies/lytenyte-pro/components";
4
import { useState } from "react";
5
import { CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons";
6

7
export default function ComponentDemo() {
8
  const [value, setValue] = useState(options[0]);
9

10
  return (
11
    <div style={{ height: "400px" }} className="ln-grid flex justify-center pt-8">
12
      <SmartSelect
13
        kind="basic"
14
        value={value}
15
        options={options}
16
        onOptionChange={(v) => {
17
          if (!v) return;
18
          setValue(v);
19
        }}
20
        container={
21
          <SmartSelect.Container className="max-h-75 overflow-auto" style={{ scrollbarWidth: "thin" }} />
22
        }
23
        trigger={
24
          <SmartSelect.BasicTrigger
25
            data-ln-button="website"
26
            data-ln-size="md"
27
            className="flex min-w-48 justify-between gap-2 ps-2.5"
28
          >
29
            {value.label}
30
            <div className="flex items-center justify-center">
31
              <ChevronDownIcon className="size-4" />
32
            </div>
33
          </SmartSelect.BasicTrigger>
34
        }
35
      >
36
        {(p) => {
37
          return (
38
            <SmartSelect.Option {...p} className="flex items-center justify-between">
39
              <div>{p.option.label}</div>
40
              {p.selected && <CheckIcon className="text-ln-primary-50" />}
41
            </SmartSelect.Option>
42
          );
43
        }}
44
      </SmartSelect>
45
    </div>
46
  );
47
}
48

52 collapsed lines
49
const options = [
50
  { id: "js", label: "JavaScript" },
51
  { id: "ts", label: "TypeScript" },
52
  { id: "py", label: "Python" },
53
  { id: "java", label: "Java" },
54
  { id: "cpp", label: "C++" },
55
  { id: "cs", label: "C#" },
56
  { id: "php", label: "PHP" },
57
  { id: "ruby", label: "Ruby" },
58
  { id: "go", label: "Go" },
59
  { id: "rust", label: "Rust" },
60
  { id: "swift", label: "Swift" },
61
  { id: "c", label: "C" },
62
  { id: "kotlin", label: "Kotlin" },
63
  { id: "scala", label: "Scala" },
64
  { id: "dart", label: "Dart" },
65
  { id: "r", label: "R" },
66
  { id: "sql", label: "SQL" },
67
  { id: "perl", label: "Perl" },
68
  { id: "lua", label: "Lua" },
69
  { id: "haskell", label: "Haskell" },
70
  { id: "elixir", label: "Elixir" },
71
  { id: "clojure", label: "Clojure" },
72
  { id: "erlang", label: "Erlang" },
73
  { id: "fsharp", label: "F#" },
74
  { id: "ocaml", label: "OCaml" },
75
  { id: "zig", label: "Zig" },
76
  { id: "nim", label: "Nim" },
77
  { id: "julia", label: "Julia" },
78
  { id: "matlab", label: "MATLAB" },
79
  { id: "fortran", label: "Fortran" },
80
  { id: "cobol", label: "COBOL" },
81
  { id: "ada", label: "Ada" },
82
  { id: "lisp", label: "Lisp" },
83
  { id: "scheme", label: "Scheme" },
84
  { id: "prolog", label: "Prolog" },
85
  { id: "bash", label: "Bash" },
86
  { id: "powershell", label: "PowerShell" },
87
  { id: "solidity", label: "Solidity" },
88
  { id: "verilog", label: "Verilog" },
89
  { id: "vhdl", label: "VHDL" },
90
  { id: "assembly", label: "Assembly" },
91
  { id: "objectivec", label: "Objective-C" },
92
  { id: "groovy", label: "Groovy" },
93
  { id: "visualbasic", label: "Visual Basic" },
94
  { id: "delphi", label: "Delphi" },
95
  { id: "smalltalk", label: "Smalltalk" },
96
  { id: "racket", label: "Racket" },
97
  { id: "elm", label: "Elm" },
98
  { id: "purescript", label: "PureScript" },
99
  { id: "crystal", label: "Crystal" },
100
];

Combo Select

Set the kind property to "combo" and the trigger property to SmartSelect.ComboTrigger to use the SmartSelect component in combobox mode. A combobox allows users to search for an item before selecting it.

The demo below shows the SmartSelect component used as a combobox. In this demo, the selected value is used as the combobox input value, but this behavior is not required. In most cases, a combobox is used to update the state of another component based on the selected value.

Combobox Select

demo.tsx


5 collapsed lines
1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { SmartSelect } from "@1771technologies/lytenyte-pro/components";
4
import { useState } from "react";
5
import { CheckIcon } from "@radix-ui/react-icons";
6

7
export default function ComponentDemo() {
8
  const [value, setValue] = useState(options[0]);
9

10
  const [query, setQuery] = useState(value.label);
11

12
  return (
13
    <div style={{ height: "400px" }} className="ln-grid flex justify-center gap-2 pt-8">
14
      <div>
15
        <SmartSelect
16
          kind="combo"
17
          value={value}
18
          options={(query) => {
19
            if (!query) return options;
20
            return options.filter((x) => x.label.toLowerCase().includes(query.toLowerCase()));
21
          }}
22
          query={query}
23
          clearOnSelect={false}
24
          onQueryChange={setQuery}
25
          onOptionChange={(v) => {
26
            if (!v) return;
27
            setValue(v);
28
            setQuery(v.label);
29
          }}
30
          container={
31
            <SmartSelect.Container className="max-h-75 overflow-auto" style={{ scrollbarWidth: "thin" }} />
32
          }
33
          trigger={<SmartSelect.ComboTrigger data-ln-input />}
34
        >
35
          {(p) => {
36
            return (
37
              <SmartSelect.Option {...p} className="flex items-center justify-between">
38
                <div>{p.option.label}</div>
39
                {p.selected && <CheckIcon className="text-ln-primary-50" />}
40
              </SmartSelect.Option>
41
            );
42
          }}
43
        </SmartSelect>
44
      </div>
45
    </div>
46
  );
47
}
48

52 collapsed lines
49
const options = [
50
  { id: "js", label: "JavaScript" },
51
  { id: "ts", label: "TypeScript" },
52
  { id: "py", label: "Python" },
53
  { id: "java", label: "Java" },
54
  { id: "cpp", label: "C++" },
55
  { id: "cs", label: "C#" },
56
  { id: "php", label: "PHP" },
57
  { id: "ruby", label: "Ruby" },
58
  { id: "go", label: "Go" },
59
  { id: "rust", label: "Rust" },
60
  { id: "swift", label: "Swift" },
61
  { id: "c", label: "C" },
62
  { id: "kotlin", label: "Kotlin" },
63
  { id: "scala", label: "Scala" },
64
  { id: "dart", label: "Dart" },
65
  { id: "r", label: "R" },
66
  { id: "sql", label: "SQL" },
67
  { id: "perl", label: "Perl" },
68
  { id: "lua", label: "Lua" },
69
  { id: "haskell", label: "Haskell" },
70
  { id: "elixir", label: "Elixir" },
71
  { id: "clojure", label: "Clojure" },
72
  { id: "erlang", label: "Erlang" },
73
  { id: "fsharp", label: "F#" },
74
  { id: "ocaml", label: "OCaml" },
75
  { id: "zig", label: "Zig" },
76
  { id: "nim", label: "Nim" },
77
  { id: "julia", label: "Julia" },
78
  { id: "matlab", label: "MATLAB" },
79
  { id: "fortran", label: "Fortran" },
80
  { id: "cobol", label: "COBOL" },
81
  { id: "ada", label: "Ada" },
82
  { id: "lisp", label: "Lisp" },
83
  { id: "scheme", label: "Scheme" },
84
  { id: "prolog", label: "Prolog" },
85
  { id: "bash", label: "Bash" },
86
  { id: "powershell", label: "PowerShell" },
87
  { id: "solidity", label: "Solidity" },
88
  { id: "verilog", label: "Verilog" },
89
  { id: "vhdl", label: "VHDL" },
90
  { id: "assembly", label: "Assembly" },
91
  { id: "objectivec", label: "Objective-C" },
92
  { id: "groovy", label: "Groovy" },
93
  { id: "visualbasic", label: "Visual Basic" },
94
  { id: "delphi", label: "Delphi" },
95
  { id: "smalltalk", label: "Smalltalk" },
96
  { id: "racket", label: "Racket" },
97
  { id: "elm", label: "Elm" },
98
  { id: "purescript", label: "PureScript" },
99
  { id: "crystal", label: "Crystal" },
100
];

Multiple Select

Set the kind property to "multi" and the trigger property to SmartSelect.MultiTrigger to use the SmartSelect component in multi-select mode. Multi-select mode allows users to select multiple items.

The value property must be provided as an array of options, unlike the basic select variant, which accepts a single selected value.

The demo below shows multi-select in action. Selected items are rendered as SmartSelect.Chip components. You must use SmartSelect.Chip for selected values to ensure the SmartSelect component correctly handles keyboard navigation.

Multiple Select

JavaScript

demo.tsx


5 collapsed lines
1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { SmartSelect } from "@1771technologies/lytenyte-pro/components";
4
import { useState } from "react";
5
import { CheckIcon, ChevronDownIcon, Cross1Icon } from "@radix-ui/react-icons";
6

7
export default function ComponentDemo() {
8
  const [values, setValues] = useState([options[0]]);
9

10
  return (
11
    <div style={{ height: "400px" }} className="ln-grid flex justify-center pt-8">
12
      <div>
13
        <SmartSelect
14
          kind="multi"
15
          value={values}
16
          options={options}
17
          onOptionChange={(v) => {
18
            setValues(v);
19
          }}
20
          container={
21
            <SmartSelect.Container className="max-h-75 overflow-auto" style={{ scrollbarWidth: "thin" }} />
22
          }
23
          trigger={
24
            <SmartSelect.MultiTrigger
25
              data-ln-button="website"
26
              className="flex max-w-80 flex-wrap items-center gap-2 rounded-lg px-2 py-2"
27
              render={
28
                <button className="flex justify-between gap-2 ps-2.5">
29
                  <div className="flex items-center justify-center">
30
                    <ChevronDownIcon className="size-4" />
31
                  </div>
32
                </button>
33
              }
34
            >
35
              {values.map((x) => {
36
                return (
37
                  <SmartSelect.Chip
38
                    key={x.id}
39
                    option={x}
40
                    className="bg-ln-column-fill border-ln-column-stroke flex items-center gap-1 text-nowrap rounded-lg border px-1 py-0.5 ps-2 text-xs"
41
                  >
42
                    <span className="relative top-px">{x.label}</span>
43
                    <SmartSelect.ChipRemove data-ln-button="secondary" data-ln-icon data-ln-size="xs">
44
                      <Cross1Icon />
45
                    </SmartSelect.ChipRemove>
46
                  </SmartSelect.Chip>
47
                );
48
              })}
49
            </SmartSelect.MultiTrigger>
50
          }
51
        >
52
          {(p) => {
53
            return (
54
              <SmartSelect.Option {...p} className="flex items-center justify-between">
55
                <div>{p.option.label}</div>
56
                {p.selected && <CheckIcon className="text-ln-primary-50" />}
57
              </SmartSelect.Option>
58
            );
59
          }}
60
        </SmartSelect>
61
      </div>
62
    </div>
63
  );
64
}
65

52 collapsed lines
66
const options = [
67
  { id: "js", label: "JavaScript" },
68
  { id: "ts", label: "TypeScript" },
69
  { id: "py", label: "Python" },
70
  { id: "java", label: "Java" },
71
  { id: "cpp", label: "C++" },
72
  { id: "cs", label: "C#" },
73
  { id: "php", label: "PHP" },
74
  { id: "ruby", label: "Ruby" },
75
  { id: "go", label: "Go" },
76
  { id: "rust", label: "Rust" },
77
  { id: "swift", label: "Swift" },
78
  { id: "c", label: "C" },
79
  { id: "kotlin", label: "Kotlin" },
80
  { id: "scala", label: "Scala" },
81
  { id: "dart", label: "Dart" },
82
  { id: "r", label: "R" },
83
  { id: "sql", label: "SQL" },
84
  { id: "perl", label: "Perl" },
85
  { id: "lua", label: "Lua" },
86
  { id: "haskell", label: "Haskell" },
87
  { id: "elixir", label: "Elixir" },
88
  { id: "clojure", label: "Clojure" },
89
  { id: "erlang", label: "Erlang" },
90
  { id: "fsharp", label: "F#" },
91
  { id: "ocaml", label: "OCaml" },
92
  { id: "zig", label: "Zig" },
93
  { id: "nim", label: "Nim" },
94
  { id: "julia", label: "Julia" },
95
  { id: "matlab", label: "MATLAB" },
96
  { id: "fortran", label: "Fortran" },
97
  { id: "cobol", label: "COBOL" },
98
  { id: "ada", label: "Ada" },
99
  { id: "lisp", label: "Lisp" },
100
  { id: "scheme", label: "Scheme" },
101
  { id: "prolog", label: "Prolog" },
102
  { id: "bash", label: "Bash" },
103
  { id: "powershell", label: "PowerShell" },
104
  { id: "solidity", label: "Solidity" },
105
  { id: "verilog", label: "Verilog" },
106
  { id: "vhdl", label: "VHDL" },
107
  { id: "assembly", label: "Assembly" },
108
  { id: "objectivec", label: "Objective-C" },
109
  { id: "groovy", label: "Groovy" },
110
  { id: "visualbasic", label: "Visual Basic" },
111
  { id: "delphi", label: "Delphi" },
112
  { id: "smalltalk", label: "Smalltalk" },
113
  { id: "racket", label: "Racket" },
114
  { id: "elm", label: "Elm" },
115
  { id: "purescript", label: "PureScript" },
116
  { id: "crystal", label: "Crystal" },
117
];

Multiple Combobox

Set the kind property to "multi-combo" and the trigger property to SmartSelect.MultiComboTrigger to use the SmartSelect component in multi-combobox mode. Multi-combobox mode allows users to select multiple items using a combobox input.

The demo below shows multi-combobox in action. Selected items are rendered as SmartSelect.Chip components. Users can type into the search input to add additional chips to the current selection.

Multi Combobox

JavaScript

demo.tsx


5 collapsed lines
1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { SmartSelect } from "@1771technologies/lytenyte-pro/components";
4
import { useState } from "react";
5
import { CheckIcon, Cross1Icon } from "@radix-ui/react-icons";
6

7
export default function ComponentDemo() {
8
  const [values, setValues] = useState([options[0]]);
9

10
  return (
11
    <div style={{ height: "400px" }} className="ln-grid flex justify-center pt-8">
12
      <div>
13
        <SmartSelect
14
          kind="multi-combo"
15
          onOptionChange={setValues}
16
          value={values}
17
          container={({ options, children }) => {
18
            return (
19
              <SmartSelect.Container className="max-h-80 overflow-auto">
20
                {options.length > 0 && children}
21
                {options.length === 0 && <div className="px-2 py-2">No options match query</div>}
22
              </SmartSelect.Container>
23
            );
24
          }}
25
          options={(query) => {
26
            if (!query) return options;
27

28
            return options.filter((x) => x.label.toLowerCase().includes(query?.toLowerCase()));
29
          }}
30
          trigger={
31
            <SmartSelect.MultiComboTrigger
32
              data-ln-input
33
              className="flex h-10 w-full items-center gap-2"
34
              renderInput={
35
                <input
36
                  placeholder="Search..."
37
                  type="text"
38
                  autoComplete="off"
39
                  className="h-full w-full focus:outline-none"
40
                />
41
              }
42
            >
43
              {values.map((x) => {
44
                return (
45
                  <SmartSelect.Chip
46
                    key={x.id}
47
                    option={x}
48
                    className="bg-ln-column-fill border-ln-column-stroke flex items-center gap-1 text-nowrap rounded-lg border px-1 py-0.5 ps-2 text-xs"
49
                  >
50
                    <span className="relative top-px">{x.label}</span>
51
                    <SmartSelect.ChipRemove data-ln-button="secondary" data-ln-icon data-ln-size="xs">
52
                      <Cross1Icon />
53
                    </SmartSelect.ChipRemove>
54
                  </SmartSelect.Chip>
55
                );
56
              })}
57
            </SmartSelect.MultiComboTrigger>
58
          }
59
        >
60
          {(p) => {
61
            return (
62
              <SmartSelect.Option key={p.option.id} {...p} className="flex items-center justify-between">
63
                {p.option.label}
64
                {p.selected && <CheckIcon className="text-ln-primary-50" />}
65
              </SmartSelect.Option>
66
            );
67
          }}
68
        </SmartSelect>
69
      </div>
70
    </div>
71
  );
72
}
73

52 collapsed lines
74
const options = [
75
  { id: "js", label: "JavaScript" },
76
  { id: "ts", label: "TypeScript" },
77
  { id: "py", label: "Python" },
78
  { id: "java", label: "Java" },
79
  { id: "cpp", label: "C++" },
80
  { id: "cs", label: "C#" },
81
  { id: "php", label: "PHP" },
82
  { id: "ruby", label: "Ruby" },
83
  { id: "go", label: "Go" },
84
  { id: "rust", label: "Rust" },
85
  { id: "swift", label: "Swift" },
86
  { id: "c", label: "C" },
87
  { id: "kotlin", label: "Kotlin" },
88
  { id: "scala", label: "Scala" },
89
  { id: "dart", label: "Dart" },
90
  { id: "r", label: "R" },
91
  { id: "sql", label: "SQL" },
92
  { id: "perl", label: "Perl" },
93
  { id: "lua", label: "Lua" },
94
  { id: "haskell", label: "Haskell" },
95
  { id: "elixir", label: "Elixir" },
96
  { id: "clojure", label: "Clojure" },
97
  { id: "erlang", label: "Erlang" },
98
  { id: "fsharp", label: "F#" },
99
  { id: "ocaml", label: "OCaml" },
100
  { id: "zig", label: "Zig" },
101
  { id: "nim", label: "Nim" },
102
  { id: "julia", label: "Julia" },
103
  { id: "matlab", label: "MATLAB" },
104
  { id: "fortran", label: "Fortran" },
105
  { id: "cobol", label: "COBOL" },
106
  { id: "ada", label: "Ada" },
107
  { id: "lisp", label: "Lisp" },
108
  { id: "scheme", label: "Scheme" },
109
  { id: "prolog", label: "Prolog" },
110
  { id: "bash", label: "Bash" },
111
  { id: "powershell", label: "PowerShell" },
112
  { id: "solidity", label: "Solidity" },
113
  { id: "verilog", label: "Verilog" },
114
  { id: "vhdl", label: "VHDL" },
115
  { id: "assembly", label: "Assembly" },
116
  { id: "objectivec", label: "Objective-C" },
117
  { id: "groovy", label: "Groovy" },
118
  { id: "visualbasic", label: "Visual Basic" },
119
  { id: "delphi", label: "Delphi" },
120
  { id: "smalltalk", label: "Smalltalk" },
121
  { id: "racket", label: "Racket" },
122
  { id: "elm", label: "Elm" },
123
  { id: "purescript", label: "PureScript" },
124
  { id: "crystal", label: "Crystal" },
125
];

Asynchronous Select

When the SmartSelect component uses a combobox trigger, the options property can return a Promise. Returning a Promise places the SmartSelect component into search mode.

The demo below shows asynchronous searching. This approach is useful when options for a given search query must be fetched from a server.

Asynchronous Multi Combobox

JavaScript

demo.tsx


5 collapsed lines
1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { SmartSelect } from "@1771technologies/lytenyte-pro/components";
4
import { useState } from "react";
5
import { CheckIcon, Cross1Icon } from "@radix-ui/react-icons";
6

7
export default function ComponentDemo() {
8
  const [values, setValues] = useState([options[0]]);
9

10
  return (
11
    <div style={{ height: "400px" }} className="ln-grid flex justify-center pt-8">
12
      <div>
13
        <SmartSelect
14
          kind="multi-combo"
15
          onOptionChange={setValues}
16
          value={values}
17
          container={({ options, children, loading }) => {
18
            if (loading) {
19
              return (
20
                <SmartSelect.Container className="max-h-80 overflow-auto">Loading...</SmartSelect.Container>
21
              );
22
            }
23

24
            return (
25
              <SmartSelect.Container className="max-h-80 overflow-auto">
26
                {options.length > 0 && children}
27
                {options.length === 0 && <div className="px-2 py-2">No options match query</div>}
28
              </SmartSelect.Container>
29
            );
30
          }}
31
          options={(query) => {
32
            if (!query) return new Promise((res) => setTimeout(() => res(options), 300));
33

34
            return new Promise((res) =>
35
              setTimeout(
36
                () => res(options.filter((x) => x.label.toLowerCase().includes(query?.toLowerCase()))),
37
                300,
38
              ),
39
            );
40
          }}
41
          trigger={
42
            <SmartSelect.MultiComboTrigger
43
              data-ln-input
44
              className="flex h-10 w-full items-center gap-2"
45
              renderInput={
46
                <input
47
                  placeholder="Search..."
48
                  type="text"
49
                  autoComplete="off"
50
                  className="h-full w-full focus:outline-none"
51
                />
52
              }
53
            >
54
              {values.map((x) => {
55
                return (
56
                  <SmartSelect.Chip
57
                    key={x.id}
58
                    option={x}
59
                    className="bg-ln-column-fill border-ln-column-stroke flex items-center gap-1 text-nowrap rounded-lg border px-1 py-0.5 ps-2 text-xs"
60
                  >
61
                    <span className="relative top-px">{x.label}</span>
62
                    <SmartSelect.ChipRemove data-ln-button="secondary" data-ln-icon data-ln-size="xs">
63
                      <Cross1Icon />
64
                    </SmartSelect.ChipRemove>
65
                  </SmartSelect.Chip>
66
                );
67
              })}
68
            </SmartSelect.MultiComboTrigger>
69
          }
70
        >
71
          {(p) => {
72
            return (
73
              <SmartSelect.Option key={p.option.id} {...p} className="flex items-center justify-between">
74
                {p.option.label}
75
                {p.selected && <CheckIcon className="text-ln-primary-50" />}
76
              </SmartSelect.Option>
77
            );
78
          }}
79
        </SmartSelect>
80
      </div>
81
    </div>
82
  );
83
}
84

52 collapsed lines
85
const options = [
86
  { id: "js", label: "JavaScript" },
87
  { id: "ts", label: "TypeScript" },
88
  { id: "py", label: "Python" },
89
  { id: "java", label: "Java" },
90
  { id: "cpp", label: "C++" },
91
  { id: "cs", label: "C#" },
92
  { id: "php", label: "PHP" },
93
  { id: "ruby", label: "Ruby" },
94
  { id: "go", label: "Go" },
95
  { id: "rust", label: "Rust" },
96
  { id: "swift", label: "Swift" },
97
  { id: "c", label: "C" },
98
  { id: "kotlin", label: "Kotlin" },
99
  { id: "scala", label: "Scala" },
100
  { id: "dart", label: "Dart" },
101
  { id: "r", label: "R" },
102
  { id: "sql", label: "SQL" },
103
  { id: "perl", label: "Perl" },
104
  { id: "lua", label: "Lua" },
105
  { id: "haskell", label: "Haskell" },
106
  { id: "elixir", label: "Elixir" },
107
  { id: "clojure", label: "Clojure" },
108
  { id: "erlang", label: "Erlang" },
109
  { id: "fsharp", label: "F#" },
110
  { id: "ocaml", label: "OCaml" },
111
  { id: "zig", label: "Zig" },
112
  { id: "nim", label: "Nim" },
113
  { id: "julia", label: "Julia" },
114
  { id: "matlab", label: "MATLAB" },
115
  { id: "fortran", label: "Fortran" },
116
  { id: "cobol", label: "COBOL" },
117
  { id: "ada", label: "Ada" },
118
  { id: "lisp", label: "Lisp" },
119
  { id: "scheme", label: "Scheme" },
120
  { id: "prolog", label: "Prolog" },
121
  { id: "bash", label: "Bash" },
122
  { id: "powershell", label: "PowerShell" },
123
  { id: "solidity", label: "Solidity" },
124
  { id: "verilog", label: "Verilog" },
125
  { id: "vhdl", label: "VHDL" },
126
  { id: "assembly", label: "Assembly" },
127
  { id: "objectivec", label: "Objective-C" },
128
  { id: "groovy", label: "Groovy" },
129
  { id: "visualbasic", label: "Visual Basic" },
130
  { id: "delphi", label: "Delphi" },
131
  { id: "smalltalk", label: "Smalltalk" },
132
  { id: "racket", label: "Racket" },
133
  { id: "elm", label: "Elm" },
134
  { id: "purescript", label: "PureScript" },
135
  { id: "crystal", label: "Crystal" },
136
];

Properties

The SmartSelect component is composed of several headless component parts. This section describes the properties for headless components that define behavior beyond standard HTML element properties.

SmartSelect

Depending on the kind property, additional properties are available.

Basic

Multi Select

Combo Select

Menu Button: Display a list of actions or options in an accessible dropdown menu.
Popover: Display additional content in a popover.
Pill Manager: Create and manage grid interactions using label pills.

Smart Select

Single Select

Basic Single Select

Combo Select

Combobox Select

Multiple Select

Multiple Select

Multiple Combobox

Multi Combobox

Asynchronous Select

Asynchronous Multi Combobox

Properties

SmartSelect

Basic

Multi Select

Combo Select

Multi-Combo Select

SmartSelect.Chip

SmartSelect.MultiTrigger

SmartSelect.MultiComboTrigger

SmartSelect.Option

Next Steps

On this page