v2.1.8
/
Use our Nuxt starter

SelectMenu

A refined and searchable selection component.
GitHub
Demo
Nuxt UI
ComboboxCombobox

Usage

Use the v-model directive to control the value of the SelectMenu or the default-value prop to set the initial value when you do not need to control its state.

{
  "wait": "Loading client-side content..."
}
Use this over a Select to take advantage of Reka UI's Combobox component that offers search capabilities and multiple selection.
This component is similar to the InputMenu but it's using a Select instead of an Input with the search inside the menu.

Items

Use the items prop as an array of strings, numbers or booleans:

{
  "wait": "Loading client-side content..."
}

You can also pass an array of objects with the following properties:

Unlike the Select component, the SelectMenu expects the whole object to be passed to the v-model directive or the default-value prop by default.

You can also pass an array of arrays to the items prop. Use the element type separator as a separator.

{
  "wait": "Loading client-side content..."
}

Value Key

You can choose to bind a single property of the object rather than the whole object by using the value-key prop. Defaults to undefined.

{
  "wait": "Loading client-side content..."
}

Multiple

Use the multiple prop to allow multiple selections, the selected items will be separated by a comma in the trigger.

{
  "wait": "Loading client-side content..."
}
Ensure to pass an array to the default-value prop or the v-model directive.

Placeholder

Use the placeholder prop to set a placeholder text.

{
  "wait": "Loading client-side content..."
}

Search Input

Use the search-input prop to customize or hide the search input (with false value).

You can pass any property from the Input component to customize it.

{
  "wait": "Loading client-side content..."
}
You can set the search-input prop to false to hide the search input.

Content

Use the content prop to control how the SelectMenu content is rendered, like its align or side for example.

{
  "wait": "Loading client-side content..."
}

Arrow

Use the arrow prop to display an arrow on the SelectMenu.

{
  "wait": "Loading client-side content..."
}

Color

Use the color prop to change the ring color when the SelectMenu is focused.

{
  "wait": "Loading client-side content..."
}
The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.

Tag

Use the tag property to display a Badge on top of the SelectMenu.

{
  "wait": "Loading client-side content..."
}
The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.

Use the tagColor property to set the color for Badge.

{
  "wait": "Loading client-side content..."
}
The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.

Size

Use the size prop to change the size of the SelectMenu.

{
  "wait": "Loading client-side content..."
}

Icon

Use the icon prop to show an Icon inside the SelectMenu.

{
  "wait": "Loading client-side content..."
}

Trailing Icon

Use the trailing-icon prop to customize the trailing Icon.

{
  "wait": "Loading client-side content..."
}

Selected Icon

Use the selected-icon prop to customize the Icon when an item is selected.

{
  "wait": "Loading client-side content..."
}

Avatar

Use the avatar prop to display an Avatar inside the SelectMenu.

{
  "wait": "Loading client-side content..."
}

Loading

Use the loading prop to show a loading icon on the SelectMenu.

{
  "wait": "Loading client-side content..."
}

Disabled

Use the disabled prop to disable the SelectMenu.

{
  "wait": "Loading client-side content..."
}

No padding

Use the noPadding prop to removes padding from the SelectMenu.

{
  "wait": "Loading client-side content..."
}
The highlight prop is used here to show the focus state.

No border

Use the noBorder prop to removes all borders (rings) from the SelectMenu.

{
  "wait": "Loading client-side content..."
}
The highlight prop is used here to indicate that there is no focus state.

Underline

Use the underline prop to removes all borders (rings) except the bottom one from the SelectMenu.

{
  "wait": "Loading client-side content..."
}
The highlight prop is used here to show the focus state.

Rounded

Use the rounded prop to round the SelectMenu.

{
  "wait": "Loading client-side content..."
}
The highlight prop is used here to show the focus state.

Examples

With items type

You can use the type property with separator to display a separator between items or label to display a label.

{
  "wait": "Loading client-side content..."
}

With colors items

You can use the color property to change the color of items.

{
  "wait": "Loading client-side content..."
}

With icon in items

You can use the icon property to display an Icon inside the items.

{
  "wait": "Loading client-side content..."
}
You can also use the #leading slot to display the selected icon.

With avatar in items

You can use the avatar property to display an Avatar inside the items.

{
  "wait": "Loading client-side content..."
}
You can also use the #leading slot to display the selected avatar.

With chip in items

You can use the chip property to display a Chip inside the items.

{
  "wait": "Loading client-side content..."
}
In this example, the #leading slot is used to display the selected chip.

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

{
  "wait": "Loading client-side content..."
}
In this example, leveraging defineShortcuts, you can toggle the SelectMenu by pressing O.

Control search term

Use the v-model:search-term directive to control the search term.

{
  "wait": "Loading client-side content..."
}

With rotating icon

Here is an example with a rotating icon that indicates the open state of the SelectMenu.

{
  "wait": "Loading client-side content..."
}

With create item

Use the create-item prop to enable users to add custom values that aren't in the predefined options.

{
  "wait": "Loading client-side content..."
}
The create option shows when no match is found by default. Set it to always to show it even when similar values exist.
Use the @create event to handle the creation of the item. You will receive the event and the item as arguments.

With fetched items

You can fetch items from an API and use them in the SelectMenu.

{
  "wait": "Loading client-side content..."
}

With ignore filter

Set the ignore-filter prop to true to disable the internal search and use your own search logic.

{
  "wait": "Loading client-side content..."
}
This example uses refDebounced to debounce the API calls.

With filter fields

Use the filter-fields prop with an array of fields to filter on. Defaults to [labelKey].

{
  "wait": "Loading client-side content..."
}

With virtualization

Use the virtualize prop to enable virtualization for large lists as a boolean or an object with options like { estimateSize: 32, overscan: 12 }.

When enabled, all groups are flattened into a single list due to a limitation of Reka UI.
{
  "wait": "Loading client-side content..."
}

With full content width

You can expand the content to the full width of its items by adding the b24ui.content,b24ui.item and b24ui.viewport slots.

{
  "wait": "Loading client-side content..."
}

As a CountryPicker

This example demonstrates using the SelectMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.

{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
id string
placeholder string

The placeholder text when the select is empty.

searchInputtrueboolean | InputProps<AcceptableValue>

Whether to display the search input or not. Can be an object to pass additional props to the input. { placeholder: 'Search...', type: 'text', size: 'md' }

color'air-primary'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot"
size'md' "sm" | "xss" | "xs" | "md" | "lg" | "xl"
noPaddingfalseboolean

Removes padding from input

noBorderfalseboolean

Removes all borders (rings)

underlinefalseboolean

Removes all borders (rings) except the bottom one

roundedfalseboolean

Rounds the corners of the select

tag string
tagColor'air-primary'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "air-selection"
requiredfalseboolean
trailingIconicons.chevronDownIconComponent

The icon displayed to open the menu.

selectedIconicons.checkIconComponent

The icon displayed when an item is selected.

content{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' } Omit<ComboboxContentProps, "asChild" | "as" | "forceMount"> & Partial<EmitsToProps<DismissableLayerEmits>>

The content of the menu.

arrowfalseboolean | Omit<ComboboxArrowProps, "asChild" | "as">

Display an arrow alongside the menu.

portaltrue string | false | true | HTMLElement

Render the menu in a portal.

virtualizefalseboolean | { overscan?: number ; estimateSize?: number | undefined; } | undefined

Enable virtualization for large lists. Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).

valueKeyundefined string | number

When items is an array of objects, select the field to use as the value instead of the object itself.

labelKey'label' string | number

When items is an array of objects, select the field to use as the label.

descriptionKey'description' string | number

When items is an array of objects, select the field to use as the description.

items SelectMenuItem[] | SelectMenuItem[][]
defaultValueany

The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu.

modelValueany

The controlled value of the SelectMenu. Can be binded-with with v-model.

multipleboolean

Whether multiple options can be selected or not.

highlightboolean

Highlight the ring color like a focus state.

createItemfalseboolean | "always" | { position?: "bottom" | "top" ; when?: "empty" | "always" | undefined; } | undefined

Determines if custom user input that does not exist in options can be added.

filterFields[labelKey] string[]

Fields to filter items by.

ignoreFilterfalseboolean

When true, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).

autofocusboolean
autofocusDelay0 number
disabledboolean

When true, prevents the user from interacting with listbox

openboolean

The controlled open state of the Combobox. Can be binded with with v-model:open.

defaultOpenboolean

The open state of the combobox when it is initially rendered.
Use when you do not need to control its open state.

name string

The name of the field. Submitted with its owning form as part of a name/value pair.

resetSearchTermOnBlurtrueboolean

Whether to reset the searchTerm when the Combobox input blurred

resetSearchTermOnSelecttrueboolean

Whether to reset the searchTerm when the Combobox value is selected

highlightOnHoverboolean

When true, hover over item will trigger highlight

iconIconComponent

Display an icon on the left side.

avatar AvatarProps

Display an avatar on the left side.

loadingboolean

When true, the loading icon will be displayed.

trailingboolean

When true, the icon will be displayed on the right side.

searchTerm'' string
b24ui { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; value?: ClassNameValue; placeholder?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; arrow?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; input?: ClassNameValue; focusScope?: ClassNameValue; }
This component also supports all native <button> HTML attributes.

Slots

Slot Type
leading{ modelValue?: any; open: boolean; b24ui: object; }
default{ modelValue?: any; open: boolean; b24ui: object; }
trailing{ modelValue?: any; open: boolean; b24ui: object; }
empty{ searchTerm?: string | undefined; }
item{ item: SelectMenuItem; index: number; b24ui: object; }
item-leading{ item: SelectMenuItem; index: number; b24ui: object; }
item-label{ item: SelectMenuItem; index: number; }
item-description{ item: SelectMenuItem; index: number; }
item-trailing{ item: SelectMenuItem; index: number; b24ui: object; }
content-top{}
content-bottom{}
create-item-label{ item: string; }

Emits

Event Type
update:open[value: boolean]
change[event: Event]
blur[event: FocusEvent]
focus[event: FocusEvent]
create[item: string]
highlight[payload: { ref: HTMLElement; value: any; } | undefined]
update:modelValue[value: any]
update:searchTerm[value: string]

Expose

When accessing the component via a template ref, you can use the following:

NameType
triggerRefRef<HTMLButtonElement | null>

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    selectMenu: {
      slots: {
        root: 'isolate relative inline-flex items-center',
        base: 'relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap',
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'absolute inset-y-0 end-0 flex items-center',
        trailingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        tag: 'pointer-events-none select-none absolute z-10 -top-[7px] right-[14px] flex flex-col justify-center items-center',
        value: 'truncate pointer-events-none',
        placeholder: 'truncate text-(--ui-color-design-plain-na-content-secondary)',
        content: [
          'light bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) rounded-(--popup-window-border-radius) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto',
          'origin-(--reka-combobox-content-transform-origin) '
        ],
        viewport: 'relative scroll-py-1 w-[240px] max-h-[40vh] overflow-x-hidden overflow-y-auto scrollbar-thin',
        arrow: 'fill-(--popup-window-background-color)',
        group: 'grid',
        empty: 'h-(--popup-window-delimiter-section-height) mt-(--menu-item-block-stack-space) py-[8px] select-none outline-none whitespace-nowrap text-center text-(length:--popup-window-delimiter-font-size)/(--ui-font-line-height-lg) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight)',
        label: 'w-full min-w-[195px] h-(--popup-window-delimiter-section-height) px-[18px] mt-(--menu-item-block-stack-space) flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap text-start text-(length:--popup-window-delimiter-font-size) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight) after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)',
        separator: 'my-[8px] mx-[18px] h-[1px] bg-(--popup-window-delimiter-bg-color)',
        item: 'group w-full min-w-[195px] h-[36px] px-[18px] mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--menu-popup-item-font-size) text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover) data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover) data-[state=open]:text-(--menu-popup-item-color-hover) data-[state=checked]:text-(--menu-popup-item-color-hover) hover:bg-(--menu-popup-item-bg-color-hover) data-highlighted:bg-(--menu-popup-item-bg-color-hover) data-[state=open]:bg-(--menu-popup-item-bg-color-hover) transition-colors',
        itemLeadingIcon: 'shrink-0 size-[24px] text-(--ui-color-design-plain-content-icon-secondary) group-data-highlighted:not-data-disabled:text-(--ui-color-accent-main-primary) group-data-[state=open]:text-(--ui-color-accent-main-primary) group-data-[state=checked]:text-(--ui-color-accent-main-primary) transition-colors',
        itemLeadingAvatar: 'shrink-0 size-[16px] me-[12px]',
        itemLeadingAvatarSize: '2xs',
        itemLeadingChip: 'shrink-0 size-[16px]',
        itemLeadingChipSize: 'sm',
        itemTrailing: 'ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center',
        itemTrailingIcon: 'shrink-0 size-[24px] text-(--ui-color-accent-main-primary)',
        itemWrapper: 'flex-1 flex flex-col min-w-0',
        itemLabel: 'truncate group-data-[state=checked]:text-(--ui-color-accent-main-primary)',
        itemDescription: 'truncate -mt-[6px] text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)',
        input: 'border-b border-(--popup-window-delimiter-bg-color)',
        focusScope: 'flex flex-col min-h-0'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group leading-none has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        noSplit: {
          false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
        },
        size: {
          xss: {
            base: 'h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]'
          },
          xs: {
            base: 'h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]'
          },
          sm: {
            base: 'h-[28px] gap-1.5 text-(length:--ui-font-size-xs)/[normal]',
            leading: 'px-1.5',
            trailing: 'px-1.5',
            leadingIcon: 'size-[16px]',
            leadingAvatar: 'size-[16px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[16px]'
          },
          md: {
            base: 'h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[18px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[18px]'
          },
          lg: {
            base: 'h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]'
          },
          xl: {
            base: 'h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]'
          }
        },
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        rounded: {
          true: 'rounded-(--ui-border-radius-3xl)',
          false: 'rounded-(--ui-border-radius-sm)'
        },
        noPadding: {
          true: {
            base: 'px-0'
          }
        },
        noBorder: {
          true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
        },
        underline: {
          true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke)'
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: 'ring ring-inset ring-(--b24ui-border-color)'
        },
        type: {
          file: 'file:me-1.5 file:text-(--ui-color-design-plain-na-content-secondary) file:outline-none'
        },
        colorItem: {
          'air-primary': {
            item: 'style-filled'
          },
          'air-primary-success': {
            item: 'style-filled-success'
          },
          'air-primary-alert': {
            item: 'style-filled-alert'
          },
          'air-primary-copilot': {
            item: 'style-filled-copilot'
          },
          'air-primary-warning': {
            item: 'style-filled-warning'
          },
          default: {
            item: 'style-old-default'
          },
          danger: {
            item: 'style-old-danger'
          },
          success: {
            item: 'style-old-success'
          },
          warning: {
            item: 'style-old-warning'
          },
          primary: {
            item: 'style-old-primary'
          },
          secondary: {
            item: 'style-old-secondary'
          },
          collab: {
            item: 'style-old-collab'
          },
          ai: {
            item: 'style-old-ai'
          }
        },
        virtualize: {
          true: {
            viewport: 'p-1 isolate'
          },
          false: {
            viewport: ''
          }
        },
        addNew: {
          true: {
            group: '',
            item: 'text-(--menu-popup-item-color) data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover) data-[state=checked]:text-(--menu-popup-item-color-hover)',
            itemLabel: 'flex flex-row flex-nowrap items-center justify-start gap-2',
            itemLeadingIcon: 'size-[20px] rounded-full text-(--ui-color-base-white-fixed) bg-(--ui-color-design-selection-content-icon-secondary) group-data-highlighted:not-data-disabled:text-(--ui-color-base-white-fixed) group-data-highlighted:not-data-disabled:bg-(--ui-color-design-selection-content-icon) group-data-[state=checked]:text-(--ui-color-base-white-fixed) group-data-[state=checked]:bg-(--ui-color-design-selection-content-icon)'
          }
        }
      },
      compoundVariants: [
        {
          colorItem: [
            'air-primary',
            'air-primary-success',
            'air-primary-alert',
            'air-primary-copilot',
            'air-primary-warning'
          ],
          active: false,
          class: {
            item: 'text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
            itemLeadingIcon: 'text-(--b24ui-background) group-data-highlighted:text-(--b24ui-background-hover) group-data-[state=open]:text-(--b24ui-background-hover)'
          }
        },
        {
          colorItem: [
            'air-primary',
            'air-primary-success',
            'air-primary-alert',
            'air-primary-copilot',
            'air-primary-warning'
          ],
          active: true,
          class: {
            item: 'text-(--b24ui-background-active)',
            itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
          }
        },
        {
          colorItem: 'default',
          active: false,
          class: ''
        },
        {
          colorItem: 'default',
          active: true,
          class: ''
        },
        {
          colorItem: [
            'danger',
            'success',
            'warning',
            'primary',
            'secondary',
            'collab',
            'ai'
          ],
          active: false,
          class: {
            item: 'text-(--b24ui-background-active) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
            itemLeadingIcon: 'text-(--b24ui-icon) group-data-highlighted:text-(--b24ui-icon) group-data-[state=open]:text-(--b24ui-icon)'
          }
        },
        {
          colorItem: [
            'danger',
            'success',
            'warning',
            'primary',
            'secondary',
            'collab',
            'ai'
          ],
          active: true,
          class: {
            item: 'text-(--b24ui-background-active)',
            itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
          }
        },
        {
          highlight: false,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          noBorder: false,
          underline: true,
          class: {
            base: 'focus-visible:border-(--b24ui-border-color) hover:border-(--b24ui-border-color) data-[state=open]:border-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: true,
          class: {
            base: 'ring-0 border-b-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: true,
          underline: false,
          class: {
            base: 'ring-0'
          }
        },
        {
          type: 'file',
          size: 'xss',
          class: 'py-[2px]'
        },
        {
          type: 'file',
          size: 'xs',
          class: 'py-[4px]'
        },
        {
          type: 'file',
          size: 'sm',
          class: 'py-[5px]'
        },
        {
          type: 'file',
          size: 'md',
          class: 'py-[7px]'
        },
        {
          type: 'file',
          size: 'lg',
          class: 'py-[9px]'
        },
        {
          type: 'file',
          size: 'xl',
          class: 'py-[11px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xss',
          class: 'ps-[20px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xs',
          class: 'ps-[22px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'sm',
          class: 'ps-[28px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'md',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'lg',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xl',
          class: 'ps-[32px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xss',
          class: 'pe-[20px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xs',
          class: 'pe-[22px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'sm',
          class: 'pe-[28px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'md',
          class: 'pe-[34px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'lg',
          class: 'pe-[38px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xl',
          class: 'pe-[38px]'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'size-[21px]'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'size-[21px]'
          }
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: [
            'xl',
            'lg',
            'md'
          ],
          rounded: false,
          class: 'rounded-(--ui-border-radius-md)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'sm',
          rounded: false,
          class: 'rounded-(--ui-border-radius-sm)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xs',
          rounded: false,
          class: 'rounded-(--ui-border-radius-xs)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xss',
          rounded: false,
          class: 'rounded-[5px]'
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        selectMenu: {
          slots: {
            root: 'isolate relative inline-flex items-center',
            base: 'relative inline-flex items-center group px-3 w-full py-0 border-0 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap',
            leading: 'absolute inset-y-0 start-0 flex items-center',
            leadingIcon: 'shrink-0 text-(--b24ui-icon-color)',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            trailing: 'absolute inset-y-0 end-0 flex items-center',
            trailingIcon: 'shrink-0 text-(--b24ui-icon-color)',
            tag: 'pointer-events-none select-none absolute z-10 -top-[7px] right-[14px] flex flex-col justify-center items-center',
            value: 'truncate pointer-events-none',
            placeholder: 'truncate text-(--ui-color-design-plain-na-content-secondary)',
            content: [
              'light bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) rounded-(--popup-window-border-radius) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto',
              'origin-(--reka-combobox-content-transform-origin) '
            ],
            viewport: 'relative scroll-py-1 w-[240px] max-h-[40vh] overflow-x-hidden overflow-y-auto scrollbar-thin',
            arrow: 'fill-(--popup-window-background-color)',
            group: 'grid',
            empty: 'h-(--popup-window-delimiter-section-height) mt-(--menu-item-block-stack-space) py-[8px] select-none outline-none whitespace-nowrap text-center text-(length:--popup-window-delimiter-font-size)/(--ui-font-line-height-lg) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight)',
            label: 'w-full min-w-[195px] h-(--popup-window-delimiter-section-height) px-[18px] mt-(--menu-item-block-stack-space) flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap text-start text-(length:--popup-window-delimiter-font-size) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight) after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)',
            separator: 'my-[8px] mx-[18px] h-[1px] bg-(--popup-window-delimiter-bg-color)',
            item: 'group w-full min-w-[195px] h-[36px] px-[18px] mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--menu-popup-item-font-size) text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover) data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover) data-[state=open]:text-(--menu-popup-item-color-hover) data-[state=checked]:text-(--menu-popup-item-color-hover) hover:bg-(--menu-popup-item-bg-color-hover) data-highlighted:bg-(--menu-popup-item-bg-color-hover) data-[state=open]:bg-(--menu-popup-item-bg-color-hover) transition-colors',
            itemLeadingIcon: 'shrink-0 size-[24px] text-(--ui-color-design-plain-content-icon-secondary) group-data-highlighted:not-data-disabled:text-(--ui-color-accent-main-primary) group-data-[state=open]:text-(--ui-color-accent-main-primary) group-data-[state=checked]:text-(--ui-color-accent-main-primary) transition-colors',
            itemLeadingAvatar: 'shrink-0 size-[16px] me-[12px]',
            itemLeadingAvatarSize: '2xs',
            itemLeadingChip: 'shrink-0 size-[16px]',
            itemLeadingChipSize: 'sm',
            itemTrailing: 'ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center',
            itemTrailingIcon: 'shrink-0 size-[24px] text-(--ui-color-accent-main-primary)',
            itemWrapper: 'flex-1 flex flex-col min-w-0',
            itemLabel: 'truncate group-data-[state=checked]:text-(--ui-color-accent-main-primary)',
            itemDescription: 'truncate -mt-[6px] text-(--b24ui-typography-description-color) text-(length:--ui-font-size-sm)',
            input: 'border-b border-(--popup-window-delimiter-bg-color)',
            focusScope: 'flex flex-col min-h-0'
          },
          variants: {
            fieldGroup: {
              horizontal: {
                root: 'group leading-none has-focus-visible:z-[1]',
                base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
              },
              vertical: {
                root: 'group has-focus-visible:z-[1]',
                base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
              }
            },
            noSplit: {
              false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
            },
            size: {
              xss: {
                base: 'h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal]',
                leading: 'px-1',
                trailing: 'px-1',
                leadingIcon: 'size-[12px]',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-[12px]'
              },
              xs: {
                base: 'h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal]',
                leading: 'px-1',
                trailing: 'px-1',
                leadingIcon: 'size-[14px]',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-[14px]'
              },
              sm: {
                base: 'h-[28px] gap-1.5 text-(length:--ui-font-size-xs)/[normal]',
                leading: 'px-1.5',
                trailing: 'px-1.5',
                leadingIcon: 'size-[16px]',
                leadingAvatar: 'size-[16px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[16px]'
              },
              md: {
                base: 'h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal]',
                leading: 'px-2',
                trailing: 'px-2',
                leadingIcon: 'size-[18px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[18px]'
              },
              lg: {
                base: 'h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal]',
                leading: 'px-2',
                trailing: 'px-2',
                leadingIcon: 'size-[22px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[22px]'
              },
              xl: {
                base: 'h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal]',
                leading: 'px-2',
                trailing: 'px-2',
                leadingIcon: 'size-[22px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[22px]'
              }
            },
            color: {
              'air-primary': {
                base: 'style-filled'
              },
              'air-primary-success': {
                base: 'style-filled-success'
              },
              'air-primary-alert': {
                base: 'style-filled-alert'
              },
              'air-primary-copilot': {
                base: 'style-filled-copilot'
              },
              'air-primary-warning': {
                base: 'style-filled-warning'
              },
              default: {
                base: 'style-old-default'
              },
              danger: {
                base: 'style-old-danger'
              },
              success: {
                base: 'style-old-success'
              },
              warning: {
                base: 'style-old-warning'
              },
              primary: {
                base: 'style-old-primary'
              },
              secondary: {
                base: 'style-old-secondary'
              },
              collab: {
                base: 'style-old-collab'
              },
              ai: {
                base: 'style-old-ai'
              }
            },
            rounded: {
              true: 'rounded-(--ui-border-radius-3xl)',
              false: 'rounded-(--ui-border-radius-sm)'
            },
            noPadding: {
              true: {
                base: 'px-0'
              }
            },
            noBorder: {
              true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
            },
            underline: {
              true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke)'
            },
            leading: {
              true: ''
            },
            trailing: {
              true: ''
            },
            loading: {
              true: ''
            },
            highlight: {
              true: 'ring ring-inset ring-(--b24ui-border-color)'
            },
            type: {
              file: 'file:me-1.5 file:text-(--ui-color-design-plain-na-content-secondary) file:outline-none'
            },
            colorItem: {
              'air-primary': {
                item: 'style-filled'
              },
              'air-primary-success': {
                item: 'style-filled-success'
              },
              'air-primary-alert': {
                item: 'style-filled-alert'
              },
              'air-primary-copilot': {
                item: 'style-filled-copilot'
              },
              'air-primary-warning': {
                item: 'style-filled-warning'
              },
              default: {
                item: 'style-old-default'
              },
              danger: {
                item: 'style-old-danger'
              },
              success: {
                item: 'style-old-success'
              },
              warning: {
                item: 'style-old-warning'
              },
              primary: {
                item: 'style-old-primary'
              },
              secondary: {
                item: 'style-old-secondary'
              },
              collab: {
                item: 'style-old-collab'
              },
              ai: {
                item: 'style-old-ai'
              }
            },
            virtualize: {
              true: {
                viewport: 'p-1 isolate'
              },
              false: {
                viewport: ''
              }
            },
            addNew: {
              true: {
                group: '',
                item: 'text-(--menu-popup-item-color) data-highlighted:not-data-disabled:text-(--menu-popup-item-color-hover) data-[state=checked]:text-(--menu-popup-item-color-hover)',
                itemLabel: 'flex flex-row flex-nowrap items-center justify-start gap-2',
                itemLeadingIcon: 'size-[20px] rounded-full text-(--ui-color-base-white-fixed) bg-(--ui-color-design-selection-content-icon-secondary) group-data-highlighted:not-data-disabled:text-(--ui-color-base-white-fixed) group-data-highlighted:not-data-disabled:bg-(--ui-color-design-selection-content-icon) group-data-[state=checked]:text-(--ui-color-base-white-fixed) group-data-[state=checked]:bg-(--ui-color-design-selection-content-icon)'
              }
            }
          },
          compoundVariants: [
            {
              colorItem: [
                'air-primary',
                'air-primary-success',
                'air-primary-alert',
                'air-primary-copilot',
                'air-primary-warning'
              ],
              active: false,
              class: {
                item: 'text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
                itemLeadingIcon: 'text-(--b24ui-background) group-data-highlighted:text-(--b24ui-background-hover) group-data-[state=open]:text-(--b24ui-background-hover)'
              }
            },
            {
              colorItem: [
                'air-primary',
                'air-primary-success',
                'air-primary-alert',
                'air-primary-copilot',
                'air-primary-warning'
              ],
              active: true,
              class: {
                item: 'text-(--b24ui-background-active)',
                itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
              }
            },
            {
              colorItem: 'default',
              active: false,
              class: ''
            },
            {
              colorItem: 'default',
              active: true,
              class: ''
            },
            {
              colorItem: [
                'danger',
                'success',
                'warning',
                'primary',
                'secondary',
                'collab',
                'ai'
              ],
              active: false,
              class: {
                item: 'text-(--b24ui-background-active) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)',
                itemLeadingIcon: 'text-(--b24ui-icon) group-data-highlighted:text-(--b24ui-icon) group-data-[state=open]:text-(--b24ui-icon)'
              }
            },
            {
              colorItem: [
                'danger',
                'success',
                'warning',
                'primary',
                'secondary',
                'collab',
                'ai'
              ],
              active: true,
              class: {
                item: 'text-(--b24ui-background-active)',
                itemLeadingIcon: 'text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)'
              }
            },
            {
              highlight: false,
              noBorder: false,
              underline: false,
              class: {
                base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
              }
            },
            {
              highlight: true,
              noBorder: false,
              underline: false,
              class: {
                base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
              }
            },
            {
              noBorder: false,
              underline: true,
              class: {
                base: 'focus-visible:border-(--b24ui-border-color) hover:border-(--b24ui-border-color) data-[state=open]:border-(--b24ui-border-color)'
              }
            },
            {
              highlight: true,
              noBorder: false,
              underline: true,
              class: {
                base: 'ring-0 border-b-(--b24ui-border-color)'
              }
            },
            {
              highlight: true,
              noBorder: true,
              underline: false,
              class: {
                base: 'ring-0'
              }
            },
            {
              type: 'file',
              size: 'xss',
              class: 'py-[2px]'
            },
            {
              type: 'file',
              size: 'xs',
              class: 'py-[4px]'
            },
            {
              type: 'file',
              size: 'sm',
              class: 'py-[5px]'
            },
            {
              type: 'file',
              size: 'md',
              class: 'py-[7px]'
            },
            {
              type: 'file',
              size: 'lg',
              class: 'py-[9px]'
            },
            {
              type: 'file',
              size: 'xl',
              class: 'py-[11px]'
            },
            {
              leading: true,
              noPadding: false,
              size: 'xss',
              class: 'ps-[20px]'
            },
            {
              leading: true,
              noPadding: false,
              size: 'xs',
              class: 'ps-[22px]'
            },
            {
              leading: true,
              noPadding: false,
              size: 'sm',
              class: 'ps-[28px]'
            },
            {
              leading: true,
              noPadding: false,
              size: 'md',
              class: 'ps-[32px]'
            },
            {
              leading: true,
              noPadding: false,
              size: 'lg',
              class: 'ps-[32px]'
            },
            {
              leading: true,
              noPadding: false,
              size: 'xl',
              class: 'ps-[32px]'
            },
            {
              trailing: true,
              noPadding: false,
              size: 'xss',
              class: 'pe-[20px]'
            },
            {
              trailing: true,
              noPadding: false,
              size: 'xs',
              class: 'pe-[22px]'
            },
            {
              trailing: true,
              noPadding: false,
              size: 'sm',
              class: 'pe-[28px]'
            },
            {
              trailing: true,
              noPadding: false,
              size: 'md',
              class: 'pe-[34px]'
            },
            {
              trailing: true,
              noPadding: false,
              size: 'lg',
              class: 'pe-[38px]'
            },
            {
              trailing: true,
              noPadding: false,
              size: 'xl',
              class: 'pe-[38px]'
            },
            {
              loading: true,
              leading: true,
              class: {
                leadingIcon: 'size-[21px]'
              }
            },
            {
              loading: true,
              leading: false,
              trailing: true,
              class: {
                trailingIcon: 'size-[21px]'
              }
            },
            {
              fieldGroup: [
                'horizontal',
                'vertical'
              ],
              size: [
                'xl',
                'lg',
                'md'
              ],
              rounded: false,
              class: 'rounded-(--ui-border-radius-md)'
            },
            {
              fieldGroup: [
                'horizontal',
                'vertical'
              ],
              size: 'sm',
              rounded: false,
              class: 'rounded-(--ui-border-radius-sm)'
            },
            {
              fieldGroup: [
                'horizontal',
                'vertical'
              ],
              size: 'xs',
              rounded: false,
              class: 'rounded-(--ui-border-radius-xs)'
            },
            {
              fieldGroup: [
                'horizontal',
                'vertical'
              ],
              size: 'xss',
              rounded: false,
              class: 'rounded-[5px]'
            }
          ],
          defaultVariants: {
            color: 'air-primary',
            size: 'md'
          }
        }
      }
    })
  ]
})

Select

A selection field to pick from various options.

Switch

A toggle control for switching between two states.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24