Location Select
Grouped, searchable location picker for event types and booking edit flows.
Searchable, grouped location picker shared by event-type setup and the booking “edit location” dialog. Callers pass options built from installed conferencing apps and credentials.
import LocationSelect, {
type SingleValueLocationOption,
} from "@calcom/features/form/components/location-select";Ownership
Feature — not @coss/ui/shared. Options use app-store location types (EventLocationType), credential/address identity, and i18n for empty/search copy. The combobox shell is coss; the contract stays Feature-owned.
Example
Use the Feature component with grouped options built from the caller's installed apps and credentials. The event-type location list is the richest composition — form field name, disabled state, custom class hooks, and option filtering:
<LocationSelect
name={`locations[${index}].type`}
placeholder={t("select")}
options={getSelectableLocationOptions(field.type)}
disabled={disableLocationProp}
value={option}
className={cn("min-w-0 flex-1", customClassNames?.locationSelect?.selectWrapper)}
customClassNames={customClassNames?.locationSelect}
onChange={(selected: SingleValueLocationOption) => {
setShowEmptyLocationSelect(false);
if (!selected?.value) return;
const eventLocationType = getEventLocationType(selected.value);
if (!eventLocationType) return;
// updateLocationField / reject duplicates — see Locations.tsx
}}
/>This is the canonical composition from Locations.tsx. For the empty-state path, the same file also passes defaultOpen={showEmptyLocationSelect}. Consumers own domain option construction and the mutation after selection; LocationSelect owns grouped search, option identity (value + credential + address), icons, disabled states, and localized combobox behavior. HostLocations and EditLocationDialog are thinner variants of the same control.
API
| Prop | Type | Notes |
|---|---|---|
options | GroupOptionType[] | Grouped LocationOption lists |
value | LocationOption | null | Current selection |
onChange | (option: LocationOption | null) => void | Selection handler |
name | string | Form field name on the combobox |
placeholder | string | Trigger placeholder |
searchPlaceholder | string | Search input placeholder |
disabled | boolean | Disables the combobox |
defaultOpen | boolean | Open on mount when needed |
className | string | Trigger / select wrapper classes |
customClassNames | LocationSelectCustomClassNames | Option/group class hooks |
id | string | Trigger id (defaults to location-select) |
inputRef / onBlur | RHF wiring | Used by booking edit-location dialog |
aria-label | string | Popup accessibility label |
data-testid | string | Defaults to location-select |
Also exports types: LocationOption, SingleValueLocationOption, GroupOptionType, LocationSelectProps.
Call sites
| File | Notes |
|---|---|
apps/web/modules/event-types/components/locations/Locations.tsx | Event-type location list |
apps/web/modules/events/components/tabs/location-tab.tsx | Cal Events location tab |
apps/web/components/dialog/EditLocationDialog.tsx | Booking edit-location dialog |
apps/web/modules/event-types/components/locations/HostLocations.tsx | Per-host location options |
Example URLs
Not exhaustive — a few places you can open locally (e.g. http://localhost:3000) to see this in product.
| Path | Notes |
|---|---|
/event-types/<eventTypeId>?tabName=setup | Event-type locations |
/events/<eventUuid>?tabName=location | Cal Events location tab |
/bookings/upcoming | Edit location — opens in dialog |
Source
On This Page