Components

Smart Select

LyteNyte Grid's Smart Select component is a combobox that supports single or 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 uses the SmartSelect component as a combobox. While this example populates the input field with the selected value, this behavior is optional. Often, a combobox updates state in other components.

Basic 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. 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 px-2 py-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 h-fit max-h-full max-w-full flex-wrap items-center gap-2 overflow-auto 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 Select

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 px-2 py-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-fit max-h-full max-w-full flex-wrap items-center gap-2 overflow-auto rounded-lg px-2 py-2"
34
              renderInput={
35
                <input
36
                  placeholder="Search..."
37
                  type="text"
38
                  autoComplete="off"
39
                  className="h-full w-32 py-1.5 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 px-2 py-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-fit max-h-full max-w-full flex-wrap items-center gap-2 overflow-auto rounded-lg px-2 py-2"
45
              renderInput={
46
                <input
47
                  placeholder="Search..."
48
                  type="text"
49
                  autoComplete="off"
50
                  className="h-full w-32 py-1.5 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
];

Smart Select 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 anchored, on-demand content in an overlay.
Pill Manager: Create and manage grid interactions using label pills.

Smart Select

Single Select

Basic Single Select

Combo Select

Basic Combobox Select

Multiple Select

Multiple Select

Multiple Combobox Select

Multi-Combobox

Asynchronous Select

Asynchronous Multi-Combobox

Smart Select Properties

SmartSelect

Basic

Multi Select

Combo Select

Multi-Combo Select

SmartSelect.Chip

SmartSelect.MultiTrigger

SmartSelect.MultiComboTrigger

SmartSelect.Option

Next Steps

On this page