# antuikit / Select

> Select, with `text` and `bare` variants, its icons from your icon pack, a Tag from `tagRender` sized to the field, and room on the left for a ring or a pulse that draws past its box.

Docs: https://antuikit.com/docs/components/select

## Install

npx antuikit@latest init
npx antuikit@latest add select

## Import

import { Select } from "@/components/ui/select";

## Demos

- [Basic](https://ui.antuikit.com/embed/select/basic.md): A `Select` with `options` and a `defaultValue`, where an option with `disabled: true` shows in the list but cannot be picked.
- [Clear button](https://ui.antuikit.com/embed/select/allow-clear.md): Set `allowClear` to show a clear button on hover, which sets the value back to `undefined`.
- [Multiple](https://ui.antuikit.com/embed/select/multiple.md): Set `mode` to `multiple` to pick several options, each shown as a removable tag in the field.
- [Tags](https://ui.antuikit.com/embed/select/tags.md): Set `mode` to `tags` to let people type values that are not in the list, and `tokenSeparators` to split pasted text like "Lucy,Jack".
- [Sizes](https://ui.antuikit.com/embed/select/sizes.md): Set `size` to `large` or `small` to change the field's height, with the middle size as the default.
- [Variants](https://ui.antuikit.com/embed/select/variants.md): Set `variant` to `outlined`, `filled`, `text`, `underlined`, `borderless` or `bare` to change how the field is drawn. `text` fills on hover and while open, and `bare` draws nothing at all.
- [Status](https://ui.antuikit.com/embed/select/status.md): Set `status` to `warning` or `error` to color the field's border for validation.
- [Disabled](https://ui.antuikit.com/embed/select/disabled.md): Set `disabled` to show the value without letting anyone open the list or change it.
- [Search](https://ui.antuikit.com/embed/select/search.md): Set `showSearch` to filter the options as you type, which a single select does not do by default.
- [Custom filter](https://ui.antuikit.com/embed/select/search-filter.md): Pass `showSearch.filterOption` your own matcher, here one that finds the text anywhere in the label, so "err" finds Cherry.
- [Search several fields](https://ui.antuikit.com/embed/select/search-multi-field.md): Pass `showSearch.optionFilterProp` an array to search more than one field, so typing part of an email finds the person.
- [Option groups](https://ui.antuikit.com/embed/select/option-groups.md): Nest options in `{ label, options }` groups to list them under headings.
- [Custom option](https://ui.antuikit.com/embed/select/option-render.md): Pass `optionRender` to draw each row yourself from any field on `option.data`, like an avatar and an email under the name.
- [Custom label](https://ui.antuikit.com/embed/select/label-render.md): Pass `labelRender` to control what the closed field shows, like a readable fallback for a value with no matching option.
- [Custom tag](https://ui.antuikit.com/embed/select/tag-render.md): Pass `tagRender` to draw each selected value in multiple mode, here as a `Tag` wired to the `closable` and `onClose` it receives.
- [Maximum count](https://ui.antuikit.com/embed/select/max-count.md): Set `maxCount` to cap how many values can be picked, so the other options become unavailable once three are chosen.
- [Collapsed tags](https://ui.antuikit.com/embed/select/max-tag-count.md): Set `maxTagCount` to show only the first few selected values and fold the rest into one "+ N" tag.
- [Prefix and suffix](https://ui.antuikit.com/embed/select/prefix-suffix.md): Pass `prefix` to put an icon or text before the value, and `suffixIcon` to replace the arrow.
- [Custom popup](https://ui.antuikit.com/embed/select/popup-render.md): Pass `popupRender` to add your own content around the option list, like a field and a button that add a new option.
- [Popup styling](https://ui.antuikit.com/embed/select/popup-class.md): Pass `classNames.popup` to style the dropdown, which renders outside the field, here tinting its background.
- [Large lists](https://ui.antuikit.com/embed/select/big-data.md): A thousand options scroll smoothly because only the rows in view are rendered, and `virtual={false}` turns that off.
- [Country picker](https://ui.antuikit.com/embed/select/country-picker.md): A searchable list of every country with a flag on each row and on the chosen value, matching the name or the two-letter code.
- [Phone number](https://ui.antuikit.com/embed/select/phone-input.md): A phone field that pairs a compact dial-code select with the number input, with a search box at the top of the wider list.
- [Time zone](https://ui.antuikit.com/embed/select/timezone.md): A time zone picker grouped by region, with each zone's UTC offset at the end of its row.
- [Status filter](https://ui.antuikit.com/embed/select/status-filter.md): A status picker with a colored `Badge` dot beside each status, in the list and in the closed field.
- [Priority](https://ui.antuikit.com/embed/select/priority.md): A multiple select at three sizes where each priority shows as a colored `Tag`, in the list and once picked.
- [Sort by](https://ui.antuikit.com/embed/select/sort-by.md): A sort menu where each option and the closed field show an icon before the label.
- [Task priority](https://ui.antuikit.com/embed/select/task-priority.md): A single select where each priority shows as a `Tag` with an icon, in the list and in the closed field.
- [Reviewer](https://ui.antuikit.com/embed/select/reviewer.md): A reviewer picker with an avatar on every row, grouped under labels, and a smaller avatar in the closed field.
- [Delivery status filter](https://ui.antuikit.com/embed/select/delivery-status.md): A multiple select whose closed field shows the picked status dots, a label and a small `Progress` ring for how many are picked.
- [Assign reviewers](https://ui.antuikit.com/embed/select/assignee-picker.md): A reviewer picker with avatars and emails in the list, where each chosen reviewer becomes a `Tag` with their avatar.
- [Access level](https://ui.antuikit.com/embed/select/access-level.md): A role picker where each option shows a short description under its name, while the closed field shows only the name.
- [Branch picker](https://ui.antuikit.com/embed/select/repo-branch.md): A branch picker that offers to create a branch when the search matches nothing, through `notFoundContent`.
- [Country and region](https://ui.antuikit.com/embed/select/dependent.md): Two selects where the region list depends on the chosen country, with every province or state, and changing the country clears the region.
- [Amount with currency](https://ui.antuikit.com/embed/select/currency-amount.md): An amount field with a currency select fused to its end by `Space.Compact`, so the two read as one control.
- [Remote search](https://ui.antuikit.com/embed/select/remote-search.md): A directory search that fetches options as you type, debounced, with a loading state and client-side filtering turned off.
- [Inside a modal](https://ui.antuikit.com/embed/select/in-modal.md): A Select inside a `Modal`, whose option list opens above the dialog with no `getPopupContainer` needed.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/select`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Select` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.