v2.4.1

InputMenu

An input field with live autocomplete suggestions.
GitHub
Demo
Nuxt UI
ComboboxCombobox

Usage

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

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" :items="items" />
</template>
Use this over an Input to take advantage of Reka UI's Combobox component that offers autocomplete capabilities.
This component is similar to the SelectMenu but it's using an Input instead of a Select.

Items

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

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" :items="items" />
</template>

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

  • label?: string
  • value?: string
  • type?: "label" | "separator" | "item"
  • icon?: IconComponent
  • avatar?: AvatarProps
  • color?: InputMenu['color']
  • chip?: ChipProps
  • disabled?: boolean
  • onSelect?: (e: Event) => void
  • class?: any
  • b24ui?: { tagsItem?: ClassNameValue, tagsItemText?: ClassNameValue, tagsItemDelete?: ClassNameValue, tagsItemDeleteIcon?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }
<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<InputMenuItem[]>([
  {
    label: 'Backlog'
  },
  {
    label: 'Todo'
  },
  {
    label: 'In Progress'
  },
  {
    label: 'Done'
  }
])
const value = ref({
  label: 'Todo'
})
</script>

<template>
  <B24InputMenu v-model="value" :items="items" />
</template>

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

<script setup lang="ts">
const items = ref([
  ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple'],
  [
    {
      type: 'separator'
    },
    'Aubergine',
    'Broccoli',
    'Carrot',
    'Courgette',
    'Leek'
  ]
])
const value = ref('Apple')
</script>

<template>
  <B24InputMenu v-model="value" :items="items" />
</template>

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.

<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<InputMenuItem[]>([
  {
    label: 'Backlog',
    id: 'backlog'
  },
  {
    label: 'Todo',
    id: 'todo'
  },
  {
    label: 'In Progress',
    id: 'in_progress'
  },
  {
    label: 'Done',
    id: 'done'
  }
])
const value = ref('todo')
</script>

<template>
  <B24InputMenu v-model="value" value-key="id" :items="items" />
</template>
Use the by prop to compare objects by a field instead of reference when the model-value is an object.

Multiple

Use the multiple prop to allow multiple selections, the selected items will be displayed as tags.

Backlog
Todo
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref(['Backlog', 'Todo'])
</script>

<template>
  <B24InputMenu v-model="value" multiple :items="items" />
</template>
Ensure to pass an array to the default-value prop or the v-model directive.

Delete Icon

With multiple, use the delete-icon prop to customize the delete Icon in the tags.

Backlog
Todo
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref(['Backlog', 'Todo'])
</script>

<template>
  <B24InputMenu v-model="value" multiple :delete-icon="RocketIcon" :items="items" />
</template>

Placeholder

Use the placeholder prop to set a placeholder text.

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
</script>

<template>
  <B24InputMenu placeholder="Select status" :items="items" />
</template>

Content

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

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu
    v-model="value"
    :content="{
      align: 'center',
      side: 'bottom',
      sideOffset: 8
    }"
    :items="items"
  />
</template>

Arrow

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

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" arrow :items="items" />
</template>

Color

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

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" color="air-primary-copilot" highlight :items="items" />
</template>
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 Input.

note
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu
    v-model="value"
    tag="note"
    color="air-primary-warning"
    highlight
    placeholder="Search..."
    :items="items"
  />
</template>
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.

note
<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu
    v-model="value"
    tag="note"
    tag-color="air-secondary-alert"
    color="air-primary-warning"
    highlight
    placeholder="Search..."
    :items="items"
  />
</template>
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 InputMenu.

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" size="xl" :items="items" />
</template>

Icon

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

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" :icon="RocketIcon" size="md" :items="items" />
</template>

Trailing Icon

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

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" :trailing-icon="RocketIcon" size="md" :items="items" />
</template>

Selected Icon

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

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'

const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" :selected-icon="RocketIcon" size="md" :items="items" />
</template>

Clear

Use the clear prop to display a clear button when a value is selected.

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" clear :items="items" />
</template>

Clear Icon

Use the clear-icon prop to customize the clear button Icon.

<script setup lang="ts">
const items = ref([
  'Backlog',
  'Todo',
  'In Progress',
  'Done'
])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" clear clear-icon="function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    "aria-hidden": "true",
    "data-slot": "icon"
  }, [
    _createElementVNode("path", {
      fill: "currentColor",
      "fill-rule": "evenodd",
      d: "M8.292 16.885c.99.828 2.158 1.267 3.415 1.153.22.572.598 1.51 1.124 2.643 2.4-1.448 2.743-3.471 2.697-4.683q.354-.353.707-.771c2.881-3.423 3.28-10.079 2.492-10.738-.788-.66-7.295.888-10.176 4.311q-.357.425-.646.837c-1.207.17-3.134.863-4.144 3.459 1.207.318 2.195.526 2.799.643.107 1.25.743 2.32 1.732 3.146m1.718-2.041a2.056 2.056 0 0 0 2.89-.252 2.04 2.04 0 0 0-.252-2.882 2.056 2.056 0 0 0-2.89.252 2.04 2.04 0 0 0 .252 2.882m5.07-4.315a1.104 1.104 0 0 1-1.552.136 1.096 1.096 0 0 1-.136-1.548 1.104 1.104 0 0 1 1.552-.135c.466.39.527 1.083.136 1.547m-5.701 7.974a5.1 5.1 0 0 1-1.75-.933 4.9 4.9 0 0 1-1.267-1.484c-.874 2.119-1.251 3.831-.984 4.045s1.968-.438 4.001-1.628",
      "clip-rule": "evenodd"
    })
  ]))
}" :items="items" />
</template>

Avatar

Use the avatar prop to show an Avatar inside the InputMenu.

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu
    v-model="value"
    :avatar="{
      src: '/b24ui/avatar/employee.png'
    }"
    :items="items"
  />
</template>

Loading

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

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref('Backlog')
</script>

<template>
  <B24InputMenu v-model="value" loading :items="items" />
</template>

Disabled

Use the disabled prop to disable the InputMenu.

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
</script>

<template>
  <B24InputMenu disabled placeholder="Select status" :items="items" />
</template>

No border

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

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
</script>

<template>
  <B24InputMenu no-border highlight placeholder="Select status" :items="items" />
</template>
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 InputMenu.

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
</script>

<template>
  <B24InputMenu underline highlight placeholder="Select status" :items="items" />
</template>
The highlight prop is used here to show the focus state.

Rounded

Use the rounded prop to round the InputMenu.

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
</script>

<template>
  <B24InputMenu rounded highlight placeholder="Select status" :items="items" />
</template>
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.

<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref<InputMenuItem[]>([
  {
    type: 'label',
    label: 'Fruits'
  },
  'Apple',
  'Banana',
  {
    type: 'separator'
  },
  'Blueberry',
  'Grapes',
  'Pineapple',
  {
    type: 'label',
    label: 'Vegetables'
  },
  'Aubergine',
  'Broccoli',
  'Carrot',
  'Courgette',
  'Leek'
])
const value = ref('Apple')
</script>

<template>
  <B24InputMenu v-model="value" :items="items" />
</template>

With colors items

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

<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'
import SettingsIcon from '@bitrix24/b24icons-vue/main/SettingsIcon'
import MyPlanIcon from '@bitrix24/b24icons-vue/main/MyPlanIcon'
import Shield2DefendedIcon from '@bitrix24/b24icons-vue/main/Shield2DefendedIcon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings',
    color: 'air-primary',
    icon: SettingsIcon
  },
  {
    label: 'My company details',
    value: 'my_company_details',
    color: 'air-primary-success',
    icon: MyPlanIcon
  },
  {
    label: 'In Progress',
    value: 'in_progress'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions',
    color: 'air-primary-alert',
    icon: Shield2DefendedIcon
  }
] satisfies InputMenuItem[])

const value = ref(items.value[0])
</script>

<template>
  <B24InputMenu v-model="value" :icon="value?.icon" :items="items" />
</template>

With icon in items

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

<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'
import SettingsIcon from '@bitrix24/b24icons-vue/main/SettingsIcon'
import MyPlanIcon from '@bitrix24/b24icons-vue/main/MyPlanIcon'
import Shield2DefendedIcon from '@bitrix24/b24icons-vue/main/Shield2DefendedIcon'

const items = ref([
  {
    label: 'CRM settings',
    value: 'settings',
    icon: SettingsIcon
  },
  {
    label: 'My company details',
    value: 'my_company_details',
    icon: MyPlanIcon
  },
  {
    label: 'In Progress',
    value: 'in_progress'
  },
  {
    label: 'Access permissions',
    value: 'access_permissions',
    icon: Shield2DefendedIcon
  }
] satisfies InputMenuItem[])

const value = ref(items.value[0])
</script>

<template>
  <B24InputMenu v-model="value" :icon="value?.icon" :items="items" />
</template>
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.

assistant
<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'

const items = ref([
  {
    label: 'Assistant',
    value: 'assistant',
    avatar: {
      src: '/b24ui/avatar/assistant.png',
      alt: 'assistant'
    }
  },
  {
    label: 'Employee',
    value: 'employee',
    avatar: {
      src: '/b24ui/avatar/employee.png',
      alt: 'employee'
    }
  }
] satisfies InputMenuItem[])

const value = ref(items.value[0])
</script>

<template>
  <B24InputMenu v-model="value" :avatar="value?.avatar" :items="items" />
</template>
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.

<script setup lang="ts">
import type { InputMenuItem, ChipProps } from '@bitrix24/b24ui-nuxt'

const items = ref([
  {
    label: 'bug',
    value: 'bug',
    chip: {
      color: 'air-primary-alert'
    }
  },
  {
    label: 'feature',
    value: 'feature',
    chip: {
      color: 'air-primary-success'
    }
  },
  {
    label: 'enhancement',
    value: 'enhancement',
    chip: {
      color: 'air-primary-copilot'
    }
  }
] satisfies InputMenuItem[])

const value = ref(items.value[0])
</script>

<template>
  <B24InputMenu v-model="value" :items="items">
    <template #leading="{ modelValue, b24ui }">
      <B24Chip
        v-if="modelValue"
        v-bind="modelValue.chip"
        inset
        standalone
        :size="(b24ui.itemLeadingChipSize() as ChipProps['size'])"
        :class="b24ui.itemLeadingChip()"
      />
    </template>
  </B24InputMenu>
</template>
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.

<script setup lang="ts">
const open = ref(false)
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <B24InputMenu v-model="value" v-model:open="open" :items="items" />
</template>
In this example, leveraging defineShortcuts, you can toggle the InputMenu by pressing O.

Control open state on focus

You can use the open-on-focus or open-on-click props to open the menu when the input is focused or clicked.

<script setup lang="ts">
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const selected = ref('My company details')
</script>

<template>
  <B24InputMenu
    v-model="selected"
    :items="items"
    open-on-focus
  />
</template>

Control search term

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

<script setup lang="ts">
const searchTerm = ref('o')
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')
</script>

<template>
  <B24InputMenu v-model="value" v-model:search-term="searchTerm" :items="items" />
</template>

With rotating icon

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

<script setup lang="ts">
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')
</script>

<template>
  <B24InputMenu
    v-model="value"
    :items="items"
    :b24ui="{
      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
    }"
  />
</template>

With create item

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

<script setup lang="ts">
const items = ref(['CRM settings', 'My company details', 'Access permissions'])
const value = ref('My company details')

function onCreate(item: string) {
  items.value.push(item)

  value.value = item
}
</script>

<template>
  <B24InputMenu
    v-model="value"
    create-item
    :items="items"
    class="w-[320px]"
    @create="onCreate"
  />
</template>
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 InputMenu.

<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users',
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24InputMenu
    :items="users"
    :loading="status === 'pending'"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="(b24ui.leadingAvatarSize() as AvatarProps['size'])"
        :class="b24ui.leadingAvatar()"
      />
    </template>
  </B24InputMenu>
</template>

With ignore filter

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

<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt'
import { refDebounced } from '@vueuse/core'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200)

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  params: { q: searchTermDebounced },
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24InputMenu
    v-model:search-term="searchTerm"
    :items="users"
    :loading="status === 'pending'"
    ignore-filter
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="(b24ui.leadingAvatarSize() as AvatarProps['size'])"
        :class="b24ui.leadingAvatar()"
      />
    </template>
  </B24InputMenu>
</template>
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].

<script setup lang="ts">
import type { AvatarProps } from '@bitrix24/b24ui-nuxt'
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users-email',
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24InputMenu
    :items="users"
    :loading="status === 'pending'"
    :filter-fields="['label', 'email']"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
    class="w-[320px]"
    :b24ui="{ content: 'w-[320px]', viewport: 'w-[320px]' }"
  >
    <template #leading="{ modelValue, b24ui }">
      <B24Avatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="(b24ui.leadingAvatarSize() as AvatarProps['size'])"
        :class="b24ui.leadingAvatar()"
      />
    </template>

    <template #item-label="{ item }">
      {{ item.label }}

      <span class="text-(--b24ui-typography-description-color)">
        {{ item.email }}
      </span>
    </template>
  </B24InputMenu>
</template>

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.
<script setup lang="ts">
import type { InputMenuItem } from '@bitrix24/b24ui-nuxt'

const items: InputMenuItem[] = Array(1000)
  .fill(0)
  .map((_, i) => ({
    label: `item-${i}`,
    value: i
  }))
</script>

<template>
  <B24InputMenu virtualize :items="items" class="w-[192px]" />
</template>

With infinite scroll

You can use the useInfiniteScroll composable to load more data as the user scrolls.

<script setup lang="ts">
import { useInfiniteScroll } from '@vueuse/core'

type User = {
  firstName: string
}

type UserResponse = {
  users: User[]
  total: number
  skip: number
  limit: number
}

const skip = ref(0)

const { data, status, execute } = await useFetch(
  'https://dummyjson.com/users?limit=10&select=firstName',
  {
    key: 'select-menu-users-infinite-scroll',
    params: { skip },
    transform: (data?: UserResponse) => {
      return data?.users.map((user) => user.firstName)
    },
    lazy: true,
    immediate: false
  }
)

const users = ref<string[]>([])

watch(data, () => {
  users.value = [...users.value, ...(data.value || [])]
})

execute()

const inputMenu = useTemplateRef('inputMenu')

onMounted(() => {
  useInfiniteScroll(
    () => inputMenu.value?.viewportRef,
    () => {
      skip.value += 10
    },
    {
      canLoadMore: () => {
        return status.value !== 'pending'
      }
    }
  )
})
</script>

<template>
  <B24InputMenu ref="inputMenu" placeholder="Select user" :items="users" />
</template>

With full content width

You can expand the content to the full width of its items by adding the min-w-fit class on the b24ui.content,b24ui.item and b24ui.viewport slots.

<script setup lang="ts">
import UserIcon from '@bitrix24/b24icons-vue/common-b24/UserIcon'
import Expand1Icon from '@bitrix24/b24icons-vue/actions/Expand1Icon'

const { data: users } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  key: 'typicode-users-email',
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    }))
  },
  lazy: true,
  onRequestError({ request }) { console.warn('[fetch request error]', request) }
})
</script>

<template>
  <B24InputMenu
    :items="users"
    :icon="UserIcon"
    :trailing-icon="Expand1Icon"
    placeholder="Select user"
    :b24ui="{ content: 'min-w-fit', viewport: 'min-w-fit', item: 'min-w-fit' }"
  >
    <template #item-label="{ item }">
      {{ item.label }}

      <span class="text-(--b24ui-typography-description-color)">
        {{ item.email }}
      </span>
    </template>
  </B24InputMenu>
</template>

As a country picker

You can use the InputMenu as a country picker with lazy loading. Countries are only fetched when the menu is first opened.

<script setup lang="ts">
import CrmSearchIcon from '@bitrix24/b24icons-vue/crm/CrmSearchIcon'
import EarthIcon from '@bitrix24/b24icons-vue/main/EarthIcon'

const { data: countries, status, execute } = await useLazyFetch<{
  name: string
  code: string
  emoji: string
}[]>('/api/countries.json', {
  immediate: false
})

function onOpen() {
  if (!countries.value?.length) {
    execute()
  }
}
</script>

<template>
  <B24InputMenu
    :items="countries"
    :loading="status === 'pending'"
    label-key="name"
    :search-input="{ icon: CrmSearchIcon }"
    placeholder="Select country"
    @update:open="onOpen"
  >
    <template #leading="{ modelValue, b24ui }">
      <span v-if="modelValue" class="size-[26px] text-center">
        {{ modelValue?.emoji }}
      </span>
      <EarthIcon v-else :class="b24ui.leadingIcon()" />
    </template>
    <template #item-leading="{ item }">
      <span class="size-[26px] text-center">
        {{ item.emoji }}
      </span>
    </template>
  </B24InputMenu>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

id string
type'text' "number" | "color" | "search" | "image" | "text" | "button" | "time" | "checkbox" | "date" | "datetime-local" | "email" | "file" | "hidden" | "month" | "password" | "radio" | "range" | "reset" | "submit" | "tel" | "url" | "week" | string & {}
placeholder string

The placeholder text when the input is empty.

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"
noBorderfalseboolean

Removes all borders (rings)

underlinefalseboolean

Removes all borders (rings) except the bottom one

roundedfalseboolean

Rounds the corners of the input

requiredboolean
autofocusboolean
autofocusDelay0 number
trailingIconicons.chevronDownIconComponent

The icon displayed to open the menu.

selectedIconicons.checkIconComponent

The icon displayed when an item is selected.

deleteIconicons.closeIconComponent

The icon displayed to delete a tag. Works only when multiple is true.

clearfalse C & false | C & true | C & Partial<Omit<ButtonProps, LinkPropsKeys>>

Display a clear button to reset the model value. Can be an object to pass additional props to the Button.

clearIconicons.closeIconComponent

The icon displayed in the clear button.

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 | ((index: number) => 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 VK

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

labelKey'label' keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>

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

descriptionKey'description' keyof Extract<NestedItem<T>, object> & string | DotPathKeys<Extract<NestedItem<T>, object>>

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

items T
defaultValue _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>

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

modelValue _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>

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

modelModifiers Mod
multiple M

Whether multiple options can be selected or not.

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"
highlightboolean

Highlight the ring color like a focus state.

fixedboolean

Keep the mobile text size on all breakpoints. (Left for backward compatibility.)

createItemfalseboolean | "always" | { position?: "top" | "bottom" ; when?: "always" | "empty" | 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.).

disabledboolean

When true, prevents the user from interacting with listbox

openboolean

The controlled open state of the Combobox. Can be binded 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

resetModelValueOnCleartrueboolean

When true the modelValue will be reset to null (or [] if multiple)

highlightOnHoverboolean

When true, hover over item will trigger highlight

openOnClick`false`boolean

Whether to open the combobox when the input is clicked

openOnFocus`false`boolean

Whether to open the combobox when the input is focused

by string | (a: T, b: T): boolean

Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.

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.

list string
readonly false | true | "true" | "false"
autocomplete string & {} | "on" | "off"
searchTerm'' string
b24ui { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; trailingClear?: 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; tagsItem?: ClassNameValue; tagsItemText?: ClassNameValue; tagsItemDelete?: ClassNameValue; tagsItemDeleteIcon?: ClassNameValue; tagsInput?: ClassNameValue; }
This component also supports all native <input> HTML attributes.

Slots

Slot Type
leading{ modelValue: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>; open: boolean; b24ui: object; }
trailing{ modelValue: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>; open: boolean; b24ui: object; }
empty{ searchTerm: string; }
item{ item: NestedItem<T>; index: number; b24ui: object; }
item-leading{ item: NestedItem<T>; index: number; b24ui: object; }
item-label{ item: NestedItem<T>; index: number; }
item-description{ item: NestedItem<T>; index: number; }
item-trailing{ item: NestedItem<T>; index: number; b24ui: object; }
tags-item-text{ item: NestedItem<T>; index: number; }
tags-item-delete{ item: NestedItem<T>; 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]
clear[]
highlight[payload: { ref: HTMLElement; value: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>; } | undefined]
remove-tag[item: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>]
update:modelValue[value: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> | IsClearUsed<M, C>]
update:searchTerm[value: string]

Expose

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

NameType
inputRefRef<HTMLInputElement | null>
viewportRefRef<HTMLDivElement | null>

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    inputMenu: {
      slots: {
        root: 'isolate relative inline-flex items-center',
        base: 'w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear transition-colors 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) placeholder:text-(--ui-color-design-plain-na-content-secondary) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle',
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-(--b24ui-icon-color)',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-30 focus:outline-none',
        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',
        trailingClear: 'p-0',
        content: 'base-mode bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) 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',
        viewport: 'relative scroll-py-1 w-[240px] max-h-[40vh] overflow-x-hidden overflow-y-auto scrollbar-thin',
        arrow: 'fill-(--ui-color-bg-content-primary)',
        group: 'grid',
        empty: 'h-(--popup-window-delimiter-section-height) py-[8px] select-none outline-none whitespace-nowrap text-center text-(length:--ui-size-sm)/(--ui-font-line-height-lg) text-(--b24ui-typography-legend-color) font-(--ui-font-weight-normal)',
        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:--ui-size-sm) text-(--b24ui-typography-legend-color) font-(--ui-font-weight-normal) after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--ui-color-divider-vibrant-default)',
        separator: 'my-[8px] mx-[18px] h-[1px] bg-(--ui-color-divider-vibrant-default)',
        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 data-disabled:select-none text-start text-(length:--ui-font-size-md) text-(--b24ui-typography-legend-color) hover:text-(--b24ui-typography-label-color) data-highlighted:not-data-disabled:text-(--b24ui-typography-label-color) data-[state=open]:text-(--b24ui-typography-label-color) data-[state=checked]:text-(--b24ui-typography-label-color) hover:bg-(--ui-color-divider-optical-1-alt) data-highlighted:bg-(--ui-color-divider-optical-1-alt) data-[state=open]:bg-(--ui-color-divider-optical-1-alt) transition-colors',
        itemLeadingIcon: 'shrink-0 size-[18px] 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]',
        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-design-plain-content-icon-secondary)',
        itemWrapper: 'flex-1 flex flex-col min-w-0',
        itemLabel: 'truncate ms-[2px] -mt-px 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)',
        tagsItem: 'ps-[13px] pe-[6px] rounded-(--ui-border-radius-xs) h-(--main-ui-square-item-height) leading-(--main-ui-square-item-height) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) inline-flex items-center gap-1 data-disabled:cursor-not-allowed data-disabled:opacity-30 data-disabled:select-none text-(--ui-color-design-tinted-content) bg-(--ui-color-design-tinted-bg-alt)',
        tagsItemText: 'truncate max-w-[180px]',
        tagsItemDelete: 'cursor-pointer inline-flex items-center disabled:pointer-events-none text-(--b24ui-icon-color-secondary) hover:text-(--b24ui-icon-color-secondary-hover) transition-none',
        tagsItemDeleteIcon: '',
        tagsInput: ''
      },
      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: '[--main-ui-square-item-height:12px] 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]',
            itemLeadingAvatar: 'size-[12px]',
            itemLeadingAvatarSize: '3xs',
            tagsInput: 'text-(length:--ui-font-size-4xs)/[normal]',
            tagsItem: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
            tagsItemDeleteIcon: 'size-[10px]'
          },
          xs: {
            base: '[--main-ui-square-item-height:16px] h-[24px] gap-1 text-(length:--ui-font-size-4xs)/[normal]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]',
            itemLeadingAvatar: 'size-[14px]',
            itemLeadingAvatarSize: '3xs',
            tagsInput: 'text-(length:--ui-font-size-xs)/[normal]',
            tagsItem: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
            tagsItemDeleteIcon: 'size-[10px]'
          },
          sm: {
            base: '[--main-ui-square-item-height:20px] 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]',
            itemLeadingAvatar: 'size-[16px]',
            itemLeadingAvatarSize: '2xs',
            tagsInput: 'text-(length:--ui-font-size-sm)/[normal]',
            tagsItem: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
            tagsItemDeleteIcon: 'size-[12px]'
          },
          md: {
            base: '[--main-ui-square-item-height:24px] 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]',
            itemLeadingAvatarSize: '2xs',
            tagsInput: 'text-(length:--ui-font-size-lg)/[normal]',
            tagsItem: 'text-(length:--ui-font-size-sm)/(--main-ui-square-item-height) gap-[4px]',
            tagsItemDeleteIcon: 'size-[18px]'
          },
          lg: {
            base: '[--main-ui-square-item-height:28px] 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]',
            itemLeadingAvatarSize: '2xs',
            tagsInput: 'text-(length:--ui-font-size-lg)/[normal]',
            tagsItem: 'text-(length:--ui-font-size-md)/(--main-ui-square-item-height) gap-1',
            tagsItemDeleteIcon: 'size-[22px]'
          },
          xl: {
            base: '[--main-ui-square-item-height:32px] 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]',
            itemLeadingAvatarSize: '2xs',
            tagsInput: 'text-(length:--ui-font-size-2xl)/[normal]',
            tagsItem: 'text-(length:--ui-font-size-xl)/(--main-ui-square-item-height) gap-1',
            tagsItemDeleteIcon: '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)'
        },
        fixed: {
          false: ''
        },
        type: {
          file: 'file:me-1.5 file:text-(--ui-color-design-plain-na-content-secondary) file:outline-none'
        },
        virtualize: {
          true: {
            viewport: 'p-1 isolate'
          },
          false: {
            viewport: ''
          }
        },
        addNew: {
          true: {
            group: '',
            item: 'text-(--b24ui-typography-legend-color) data-highlighted:not-data-disabled:text-(--b24ui-typography-label-color) data-[state=checked]:text-(--b24ui-typography-label-color)',
            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)'
          }
        },
        multiple: {
          true: {
            root: 'flex-wrap',
            base: 'py-[6px] ps-[6px] pe-[39px]',
            tagsInput: 'flex-1 border-0 bg-transparent ps-[6px] pe-[0px] py-0 placeholder:text-(--ui-color-design-plain-na-content-secondary) focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 focus:ring-0 focus-visible:ring-0'
          },
          false: {
            base: 'px-3 placeholder:text-(--ui-color-design-plain-na-content-secondary) focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30'
          }
        },
        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'
          }
        }
      },
      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)'
          }
        },
        {
          size: 'xss',
          multiple: true,
          class: {
            base: 'min-h-[20px] h-auto py-[2px] ps-[4px]'
          }
        },
        {
          size: 'xs',
          multiple: true,
          class: {
            base: 'min-h-[24px] h-auto py-[2px] ps-[4px]'
          }
        },
        {
          size: 'sm',
          multiple: true,
          class: {
            base: 'min-h-[28px] h-auto py-[4px] ps-[4px]'
          }
        },
        {
          size: 'md',
          multiple: true,
          class: {
            base: 'min-h-[34px] h-auto py-[4px] ps-[4px]'
          }
        },
        {
          size: 'lg',
          multiple: true,
          class: {
            base: 'min-h-[38px] h-auto py-[4px] ps-[4px]'
          }
        },
        {
          size: 'xl',
          multiple: true,
          class: {
            base: 'min-h-[46px] h-auto'
          }
        },
        {
          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]'
        },
        {
          fixed: false,
          size: 'xss',
          class: 'md:text-(length:--ui-font-size-4xs)/[normal]'
        },
        {
          fixed: false,
          size: 'xs',
          class: 'md:text-(length:--ui-font-size-xs)/[normal]'
        },
        {
          fixed: false,
          size: 'sm',
          class: 'md:text-(length:--ui-font-size-sm)/[normal]'
        },
        {
          fixed: false,
          size: 'md',
          class: 'md:text-(length:--ui-font-size-lg)/[normal]'
        },
        {
          fixed: false,
          size: 'lg',
          class: 'md:text-(length:--ui-font-size-lg)/[normal]'
        }
      ],
      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: {
        inputMenu: {
          slots: {
            root: 'isolate relative inline-flex items-center',
            base: 'w-full py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear transition-colors 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) placeholder:text-(--ui-color-design-plain-na-content-secondary) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle',
            leading: 'absolute inset-y-0 start-0 flex items-center',
            leadingIcon: 'shrink-0 text-(--b24ui-icon-color)',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-30 focus:outline-none',
            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',
            trailingClear: 'p-0',
            content: 'base-mode bg-(--ui-color-bg-content-primary) shadow-(--popup-window-box-shadow) rounded-(--ui-border-radius-xl) 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',
            viewport: 'relative scroll-py-1 w-[240px] max-h-[40vh] overflow-x-hidden overflow-y-auto scrollbar-thin',
            arrow: 'fill-(--ui-color-bg-content-primary)',
            group: 'grid',
            empty: 'h-(--popup-window-delimiter-section-height) py-[8px] select-none outline-none whitespace-nowrap text-center text-(length:--ui-size-sm)/(--ui-font-line-height-lg) text-(--b24ui-typography-legend-color) font-(--ui-font-weight-normal)',
            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:--ui-size-sm) text-(--b24ui-typography-legend-color) font-(--ui-font-weight-normal) after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--ui-color-divider-vibrant-default)',
            separator: 'my-[8px] mx-[18px] h-[1px] bg-(--ui-color-divider-vibrant-default)',
            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 data-disabled:select-none text-start text-(length:--ui-font-size-md) text-(--b24ui-typography-legend-color) hover:text-(--b24ui-typography-label-color) data-highlighted:not-data-disabled:text-(--b24ui-typography-label-color) data-[state=open]:text-(--b24ui-typography-label-color) data-[state=checked]:text-(--b24ui-typography-label-color) hover:bg-(--ui-color-divider-optical-1-alt) data-highlighted:bg-(--ui-color-divider-optical-1-alt) data-[state=open]:bg-(--ui-color-divider-optical-1-alt) transition-colors',
            itemLeadingIcon: 'shrink-0 size-[18px] 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]',
            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-design-plain-content-icon-secondary)',
            itemWrapper: 'flex-1 flex flex-col min-w-0',
            itemLabel: 'truncate ms-[2px] -mt-px 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)',
            tagsItem: 'ps-[13px] pe-[6px] rounded-(--ui-border-radius-xs) h-(--main-ui-square-item-height) leading-(--main-ui-square-item-height) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) inline-flex items-center gap-1 data-disabled:cursor-not-allowed data-disabled:opacity-30 data-disabled:select-none text-(--ui-color-design-tinted-content) bg-(--ui-color-design-tinted-bg-alt)',
            tagsItemText: 'truncate max-w-[180px]',
            tagsItemDelete: 'cursor-pointer inline-flex items-center disabled:pointer-events-none text-(--b24ui-icon-color-secondary) hover:text-(--b24ui-icon-color-secondary-hover) transition-none',
            tagsItemDeleteIcon: '',
            tagsInput: ''
          },
          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: '[--main-ui-square-item-height:12px] 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]',
                itemLeadingAvatar: 'size-[12px]',
                itemLeadingAvatarSize: '3xs',
                tagsInput: 'text-(length:--ui-font-size-4xs)/[normal]',
                tagsItem: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
                tagsItemDeleteIcon: 'size-[10px]'
              },
              xs: {
                base: '[--main-ui-square-item-height:16px] h-[24px] gap-1 text-(length:--ui-font-size-4xs)/[normal]',
                leading: 'px-1',
                trailing: 'px-1',
                leadingIcon: 'size-[14px]',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-[14px]',
                itemLeadingAvatar: 'size-[14px]',
                itemLeadingAvatarSize: '3xs',
                tagsInput: 'text-(length:--ui-font-size-xs)/[normal]',
                tagsItem: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
                tagsItemDeleteIcon: 'size-[10px]'
              },
              sm: {
                base: '[--main-ui-square-item-height:20px] 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]',
                itemLeadingAvatar: 'size-[16px]',
                itemLeadingAvatarSize: '2xs',
                tagsInput: 'text-(length:--ui-font-size-sm)/[normal]',
                tagsItem: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
                tagsItemDeleteIcon: 'size-[12px]'
              },
              md: {
                base: '[--main-ui-square-item-height:24px] 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]',
                itemLeadingAvatarSize: '2xs',
                tagsInput: 'text-(length:--ui-font-size-lg)/[normal]',
                tagsItem: 'text-(length:--ui-font-size-sm)/(--main-ui-square-item-height) gap-[4px]',
                tagsItemDeleteIcon: 'size-[18px]'
              },
              lg: {
                base: '[--main-ui-square-item-height:28px] 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]',
                itemLeadingAvatarSize: '2xs',
                tagsInput: 'text-(length:--ui-font-size-lg)/[normal]',
                tagsItem: 'text-(length:--ui-font-size-md)/(--main-ui-square-item-height) gap-1',
                tagsItemDeleteIcon: 'size-[22px]'
              },
              xl: {
                base: '[--main-ui-square-item-height:32px] 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]',
                itemLeadingAvatarSize: '2xs',
                tagsInput: 'text-(length:--ui-font-size-2xl)/[normal]',
                tagsItem: 'text-(length:--ui-font-size-xl)/(--main-ui-square-item-height) gap-1',
                tagsItemDeleteIcon: '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)'
            },
            fixed: {
              false: ''
            },
            type: {
              file: 'file:me-1.5 file:text-(--ui-color-design-plain-na-content-secondary) file:outline-none'
            },
            virtualize: {
              true: {
                viewport: 'p-1 isolate'
              },
              false: {
                viewport: ''
              }
            },
            addNew: {
              true: {
                group: '',
                item: 'text-(--b24ui-typography-legend-color) data-highlighted:not-data-disabled:text-(--b24ui-typography-label-color) data-[state=checked]:text-(--b24ui-typography-label-color)',
                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)'
              }
            },
            multiple: {
              true: {
                root: 'flex-wrap',
                base: 'py-[6px] ps-[6px] pe-[39px]',
                tagsInput: 'flex-1 border-0 bg-transparent ps-[6px] pe-[0px] py-0 placeholder:text-(--ui-color-design-plain-na-content-secondary) focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30 focus:ring-0 focus-visible:ring-0'
              },
              false: {
                base: 'px-3 placeholder:text-(--ui-color-design-plain-na-content-secondary) focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:select-none disabled:opacity-30'
              }
            },
            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'
              }
            }
          },
          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)'
              }
            },
            {
              size: 'xss',
              multiple: true,
              class: {
                base: 'min-h-[20px] h-auto py-[2px] ps-[4px]'
              }
            },
            {
              size: 'xs',
              multiple: true,
              class: {
                base: 'min-h-[24px] h-auto py-[2px] ps-[4px]'
              }
            },
            {
              size: 'sm',
              multiple: true,
              class: {
                base: 'min-h-[28px] h-auto py-[4px] ps-[4px]'
              }
            },
            {
              size: 'md',
              multiple: true,
              class: {
                base: 'min-h-[34px] h-auto py-[4px] ps-[4px]'
              }
            },
            {
              size: 'lg',
              multiple: true,
              class: {
                base: 'min-h-[38px] h-auto py-[4px] ps-[4px]'
              }
            },
            {
              size: 'xl',
              multiple: true,
              class: {
                base: 'min-h-[46px] h-auto'
              }
            },
            {
              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]'
            },
            {
              fixed: false,
              size: 'xss',
              class: 'md:text-(length:--ui-font-size-4xs)/[normal]'
            },
            {
              fixed: false,
              size: 'xs',
              class: 'md:text-(length:--ui-font-size-xs)/[normal]'
            },
            {
              fixed: false,
              size: 'sm',
              class: 'md:text-(length:--ui-font-size-sm)/[normal]'
            },
            {
              fixed: false,
              size: 'md',
              class: 'md:text-(length:--ui-font-size-lg)/[normal]'
            },
            {
              fixed: false,
              size: 'lg',
              class: 'md:text-(length:--ui-font-size-lg)/[normal]'
            }
          ],
          defaultVariants: {
            color: 'air-primary',
            size: 'md'
          }
        }
      }
    })
  ]
})

InputDate

A date selection input field.

InputNumber

Provide numerical input with a flexible range setting.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24