antuikit's Select is Ant Design's Select, installed into your project as a file you own. It adds no prop and keeps both generic parameters. What it adds is icons: the arrow, the clear button and each tag's remove mark come from your icon pack through AntuikitProvider, and the search and check marks are set in the component file, because both depend on mode.
Adding the search icon never turns search on. A single select still has search off until you set showSearch.
Install
npx antuikit@latest init
npx antuikit@latest add select
The first command installs AntuikitProvider and the theme tokens. The second adds this component.
Import
From @/components/ui/select, not from antd. The file is yours once it is installed, so the import path is a path in your project.
import { Select } from "@/components/ui/select"
The axes
The enumerated props, and the values each one takes. These match the Design tab's Figma properties.
mode takes multiple and tags, or nothing at all for a single value. It is the only axis that changes what value holds.
variant is the fill and border axis: outlined (the default), filled, borderless, underlined. It replaces the deprecated bordered.
status is the semantic axis: error or warning.
size is the density axis: small, medium, large. Set it on ConfigProvider rather than per field.
placement picks which corner the popup opens from, and defaults to bottomLeft (bottomRight under direction="rtl").
Flags
The booleans, grouped by what they decide. Two of them depend on each other.
allowClear adds the clear button. It also takes an object, { clearIcon, label }, and the label is the button's accessible name.
disabled locks the control. There is no readOnly prop on Select at all.
loading swaps the suffix for a spinner, which is what a remote-backed Select shows while a search is in flight.
labelInValue switches value and onChange to { value, label } pairs.
open and defaultOpen drive the popup; autoFocus focuses the field on mount; defaultActiveFirstOption decides whether the first row starts active.
virtual and popupMatchSelectWidth are the pair. popupMatchSelectWidth={false} also turns virtualization off, so a long list should keep the popup the width of the field.
showSearch is a boolean or a config object, and the object form turns search on by itself. Its default is off in single mode and on in both multi modes.
Slots
The props that take a node. Use a slot before a descendant selector. Options are data rather than children, so the slots are the parts around them and the four render functions.
prefix sits before the value inside the field; suffixIcon is the arrow at the end of it, and null removes it.
placeholder shows while the field is empty. It is not a label and does not survive a selection.
notFoundContent fills an empty popup. Give it different text before the first search than after one that matched nothing.
loadingIcon, menuItemSelectedIcon and allowClear.clearIcon replace three of the icons your icon pack supplies.
maxTagPlaceholder relabels the + N ... tag that maxTagCount folds the rest into. It takes a node or a function of the omitted values.
labelRender draws the selected value in the field, optionRender draws a row in the popup, tagRender replaces a multiple-mode tag, and popupRender wraps the whole menu, which is where a footer action goes.
The two generic parameters
Select is generic over two parameters, and both are kept. ValueType ties value, defaultValue and onChange together; OptionType types the options array and every callback that receives an option, so optionRender, filterOption and onSelect all see your own extra fields.
Without the parameters the option type falls back to any, so your extra fields go untyped. ValueType defaults to any, so a bare <Select /> still compiles.
Clearing sets the value to undefined. With allowClear, a single select calls onChange with undefined and a multiple one with an empty array, so type your state to allow it: useState<string | undefined>().
Events
onChange carries the new value and the option, or the array of options in a multi mode.
onSelect and onDeselect fire per option rather than per value, which is what a multi mode needs when each pick has its own side effect.
onOpenChange fires when the popup opens or closes. It replaces onDropdownVisibleChange.
showSearch.onSearch fires on every keystroke in the field. Debounce it before it reaches a network.
onClear, onPopupScroll (for infinite lists), onFocus and onBlur.
Styling
Pass classNames or styles to style one part. Use these keys before a descendant selector: a part with a key keeps its name across releases. popup is its own object, because the popup renders in a portal outside the field.
1
<Select
2
classNames={{
3
root: "…",
4
prefix: "…",
5
suffix: "…",
6
input: "…",
7
placeholder: "…",
8
content: "…",
9
item: "…",
10
itemContent: "…",
11
itemRemove: "…",
12
clear: "…",
13
popup: {
14
root: "…",
15
listItem: "…",
16
list: "…",
17
},
18
}}
19
/>
A class on one of these keys wins over the component's own styles without !important. Writing a component token's CSS variable on the element does nothing, so change the token in your theme or style the part.
API Reference
Select
Select's props. Rows marked antuikit in the Version column are added by the kit.
showSearch
The object form of showSearch. Rows marked antuikit in the Version column are added by the kit.