Select

A dropdown menu for displaying choices.

When to use

• A dropdown menu for displaying choices - an elegant alternative to the native the native select element element.
• Utilizing Radio is recommended when there are fewer total options (less than 5).
• You probably need AutoComplete if you're looking for an input box that can be typed or selected.

Examples

Width and long options

Long options — a job, a vendor, a stock location path — used to be cut off in a field narrower than the space it had. The CeeBee Select sets three defaults on Ant's contract:

• The field is as wide as its longest option, between 12rem and 28rem, measured from the labels in ch so the server and the client agree. It never outgrows its container, so it takes the full width on a phone. Set style={{ width }} and your width is kept.
• The dropdown may be wider than the field, up to 32rem (popupMatchSelectWidth defaults to false), so options are read whole where there is room.
• What still does not fit ellipsises, and the selected value and each option show their whole text in a tooltip when, and only when, they are cut. The full text stays the element's content, so the accessible name is never the shortened one. A consumer's own labelRender or optionRender replaces this for what it renders.

Clear action

When allowClear is enabled, the clear button uses the clear label from LabelsProvider; without a provider override it keeps the default “Clear” label. The Ant Design clear icon also stays intact. A caller-provided allowClear.label takes precedence over the provider label, and an explicit allowClear.clearIcon takes precedence over configured icons. Without that icon, the Select clearIcon prop, ConfigProvider's select.clearIcon, then Ant Design's default icon are used in that order.

The clear action has a token-sized hit area around its compact icon. It remains visible when reached by keyboard focus, with the shared focus indicator, even while the pointer is outside the Select.

Wrap the part of the app that needs localized library labels with LabelsProvider:

import { LabelsProvider, Select } from '@ceebee/ui/client';
<LabelsProvider labels={{ clear: 'Clear choice' }}>  <Select allowClear options={[{ value: 'a', label: 'First choice' }]} value="a" /></LabelsProvider>

An explicit label and icon stay with the Select:

<Select  allowClear={{ label: 'Remove choice', clearIcon: <span aria-hidden="true">×</span> }}  options={[{ value: 'a', label: 'First choice' }]}  value="a"/>

allowClear={false} disables clearing even when a ConfigProvider enables it. Omitting allowClear keeps Ant Design's configured behavior, including a provider-level select.allowClear setting.

Sizes

small, middle (the default), and large map to --cb-control-height-sm, --cb-control-height-md, and --cb-control-height-lg. Each is max() of a preferred step (--cb-control-height-base-*) and the active pointer floor, so a density scale can retune the ladder but never take a control under its floor. On a coarse pointer — a touch screen — --cb-control-floor becomes --cb-control-floor-coarse (2.75rem, 44px), so small and middle both reach 44px and large keeps its 48px, with no per-control CSS. A pointer that hovers keeps --cb-control-floor-fine (2rem, 32px).

API

Select, Select.Option, and Select.OptGroup are exported from @ceebee/ui/client.