Select
One value or several, chosen from a list the field opens. Search, grouping, tags, custom option rendering and virtual scrolling.
Anotomy
Structure of the select and how its internal parts are composed. These are the select's semantic parts, so they are also what the
classNames and styles objects accept. The popup's parts go in a nested popup object.Single
| Name | Description | |
|---|---|---|
1 | root | The field's box: border, background, radius and padding. variant, size and status change it here. |
2 | prefix | The node from prefix, before the selection. |
3 | content | The area that holds the chosen label. |
4 | clear | The button that empties the field, shown on hover when allowClear is set. |
5 | suffix | The arrow at the end, or a search glyph while searching. suffixIcon replaces it. |
6 | popup.root | The dropdown panel. It is portalled to <body>, so these keys are how you reach it. |
7 | popup.list | The scrolling list of options inside the panel. |
8 | popup.listItem | One option, from options. The chosen one is highlighted. |
Multiple
With mode="multiple" or mode="tags", each chosen value becomes a tag with its own three parts.
| Name | Description | |
|---|---|---|
1 | root | The field's box. It grows in height when the tags wrap. |
2 | prefix | The node from prefix, before the tags. |
3 | content | The area that holds the tags and the search input. |
4 | item | One tag for a chosen value. tagRender replaces it, and maxTagCount folds the rest into a "+N" tag. |
5 | itemContent | A tag's label. |
6 | itemRemove | A tag's remove button. removeIcon replaces the glyph. |
7 | clear | The button that removes every tag, shown on hover when allowClear is set. |
8 | suffix | The arrow at the end, or a search glyph while the popup is open. |
9 | popup.root | The dropdown panel. |
10 | popup.listItem | One option. A chosen one shows menuItemSelectedIcon. |
11 | popup.list | The scrolling list of options inside the panel. |
© 2026 AntUIKit . All rights reserved.