v2.1.16
/
Use our Nuxt starter

InputTags

A tags input component with interactive tag elements.
GitHub
Demo
Nuxt UI
InputTagsInputTags

Usage

Use the v-model directive to control the value of the InputTags.

Bitrix24
<script setup lang="ts">
const value = ref(['Bitrix24'])
</script>

<template>
  <B24InputTags v-model="value" />
</template>

Use the default-value prop to set the initial value when you do not need to control its state.

Bitrix24
<template>
  <B24InputTags
    :default-value="{
      '0': 'Bitrix24'
    }"
  />
</template>

Placeholder

Use the placeholder prop to set a placeholder text.

<template>
  <B24InputTags placeholder="Enter tags..." />
</template>

Max Length

Use the max-length prop to set the maximum number of characters allowed in a tag.

<template>
  <B24InputTags :max-length="4" />
</template>

Color

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

Bitrix24
<script setup lang="ts">
const value = ref(['Bitrix24'])
</script>

<template>
  <B24InputTags v-model="value" color="air-primary" highlight />
</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 InputTags.

note
Bitrix24
<script setup lang="ts">
const value = ref(['Bitrix24'])
</script>

<template>
  <B24InputTags v-model="value" tag="note" color="air-primary" highlight />
</template>

Use the tagColor property to set the color for Badge.

note
Bitrix24
<script setup lang="ts">
const value = ref(['Bitrix24'])
</script>

<template>
  <B24InputTags
    v-model="value"
    tag="note"
    tag-color="air-secondary-alert"
    color="air-primary"
    highlight
  />
</template>

Sizes

Use the size prop to adjust the size of the InputTags.

Bitrix24
<script setup lang="ts">
const value = ref(['Bitrix24'])
</script>

<template>
  <B24InputTags v-model="value" size="xl" />
</template>

Icon

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

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

const value = ref(['Bitrix24'])
</script>

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

Trailing Icon

Use the trailing-icon prop to set icon for trailing position.

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

const value = ref(['Bitrix24'])
</script>

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

Avatar

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

Bitrix24
<script setup lang="ts">
const value = ref(['Bitrix24'])
</script>

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

Delete Icon

Use the delete-icon prop to customize the delete Icon in the tags.

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

const value = ref(['Bitrix24'])
</script>

<template>
  <B24InputTags v-model="value" :delete-icon="RocketIcon" />
</template>

Loading

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

Bitrix24
<script setup lang="ts">
const value = ref(['Bitrix24'])
</script>

<template>
  <B24InputTags v-model="value" loading />
</template>

Disabled

Use the disabled prop to disable the InputTags.

Bitrix24
<script setup lang="ts">
const value = ref(['Bitrix24'])
</script>

<template>
  <B24InputTags v-model="value" disabled />
</template>

No border

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

Bitrix24
<script setup lang="ts">
const value = ref(['Bitrix24'])
</script>

<template>
  <B24InputTags no-border highlight v-model="value" />
</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 InputTags.

Bitrix24
<script setup lang="ts">
const value = ref(['Bitrix24'])
</script>

<template>
  <B24InputTags underline highlight v-model="value" />
</template>
The highlight prop is used here to show the focus state.

Rounded

Use the rounded prop to round the InputTags.

Bitrix24
<script setup lang="ts">
const value = ref(['Bitrix24'])
</script>

<template>
  <B24InputTags rounded highlight v-model="value" />
</template>
The highlight prop is used here to show the focus state.

Examples

Within a FormField

You can use the InputTags within a FormField component to display a label, help text, required indicator, etc.

Bitrix24
<script setup lang="ts">
const tags = ref(['Bitrix24'])
</script>

<template>
  <B24FormField label="Tags" required>
    <B24InputTags v-model="tags" placeholder="Enter tags..." />
  </B24FormField>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

placeholder string

The placeholder text when the input is empty.

maxLength number

The maximum number of character allowed.

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

Removes all borders (rings)

underlinefalseboolean

Removes all borders (rings) except the bottom one

roundedfalseboolean

Rounds the corners of the input

autofocusboolean
autofocusDelay0 number
deleteIconicons.closeIconComponent

The icon displayed to delete a tag.

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.

modelValue null | AcceptableInputValue[]

The controlled value of the tags input. Can be bind as v-model.

defaultValue AcceptableInputValue[]

The value of the tags that should be added. Use when you do not need to control the state of the tags input

addOnPasteboolean

When true, allow adding tags on paste. Work in conjunction with delimiter prop.

addOnTabboolean

When true allow adding tags on tab keydown

addOnBlurboolean

When true allow adding tags blur input

duplicateboolean

When true, allow duplicated tags.

disabledboolean

When true, prevents the user from interacting with the tags input.

delimiter string | RegExp

The character or regular expression to trigger the addition of a new tag. Also used to split tags for @paste event

max number

Maximum number of tags.

id string
convertValue (value: string): AcceptableInputValue

Convert the input value to the desired type. Mandatory when using objects as values and using TagsInputInput

displayValue (value: AcceptableInputValue): string

Display the value of the tag. Useful when you want to apply modifications to the value like adding a suffix or when using object as values

name string

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

requiredboolean

When true, indicates that the user must set the value before the owning form can be submitted.

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.

trailingIconIconComponent

Display an icon on the right side.

autocomplete string
list string
readonly false | true | "false" | "true"
b24ui { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; item?: ClassNameValue; itemText?: ClassNameValue; itemDelete?: ClassNameValue; itemDeleteIcon?: ClassNameValue; input?: ClassNameValue; }
This component also supports all native <input> HTML attributes.

Slots

Slot Type
leading{ b24ui: object; }
default{ b24ui: object; }
trailing{ b24ui: object; }
item-text{ item: AcceptableInputValue; index: number; b24ui: object; }
item-delete{ item: AcceptableInputValue; index: number; b24ui: object; }

Emits

Event Type
change[event: Event]
blur[event: FocusEvent]
focus[event: FocusEvent]
update:modelValue[payload: AcceptableInputValue[]]
invalid[payload: AcceptableInputValue]
addTag[payload: AcceptableInputValue]
removeTag[payload: AcceptableInputValue]

Expose

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

NameType
inputRefRef<HTMLInputElement | null>

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    inputTags: {
      slots: {
        root: [
          'isolate relative inline-flex items-center',
          'flex-wrap'
        ],
        base: '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 pe-[39px]',
        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',
        item: '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:pointer-events-none data-disabled:select-none text-(--ui-color-design-tinted-content) bg-(--ui-color-design-tinted-bg-alt)',
        itemText: 'truncate max-w-[180px]',
        itemDelete: 'cursor-pointer inline-flex items-center disabled:pointer-events-none disabled:select-none text-(--b24ui-icon-color-secondary) hover:text-(--b24ui-icon-color-secondary-hover) transition-none',
        itemDeleteIcon: 'shrink-0',
        input: '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'
      },
      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] gap-1 text-(length:--ui-font-size-4xs)/[normal] min-h-[20px] h-auto py-[2px] ps-[4px]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]',
            input: 'text-(length:--ui-font-size-4xs)/[normal]',
            item: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
            itemDeleteIcon: 'size-[10px]'
          },
          xs: {
            base: '[--main-ui-square-item-height:16px] gap-1 text-(length:--ui-font-size-xs)/[normal] min-h-[24px] h-auto py-[2px] ps-[4px]',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]',
            input: 'text-(length:--ui-font-size-xs)/[normal]',
            item: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
            itemDeleteIcon: 'size-[10px]'
          },
          sm: {
            base: '[--main-ui-square-item-height:20px] gap-1.5 text-(length:--ui-font-size-sm)/[normal] min-h-[28px] h-auto py-[4px] ps-[4px]',
            leading: 'px-1.5',
            trailing: 'px-1.5',
            leadingIcon: 'size-[16px]',
            leadingAvatar: 'size-[16px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[16px]',
            input: 'text-(length:--ui-font-size-sm)/[normal]',
            item: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
            itemDeleteIcon: 'size-[12px]'
          },
          md: {
            base: '[--main-ui-square-item-height:24px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] min-h-[34px] h-auto py-[4px] ps-[4px]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[18px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[18px]',
            input: 'text-(length:--ui-font-size-lg)/[normal]',
            item: 'text-(length:--ui-font-size-sm)/(--main-ui-square-item-height) gap-[4px]',
            itemDeleteIcon: 'size-[18px]'
          },
          lg: {
            base: '[--main-ui-square-item-height:28px] gap-2 text-(length:--ui-font-size-lg)/[normal] min-h-[38px] h-auto py-[4px] ps-[4px]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]',
            input: 'text-(length:--ui-font-size-lg)/[normal]',
            item: 'text-(length:--ui-font-size-md)/(--main-ui-square-item-height) gap-1',
            itemDeleteIcon: 'size-[22px]'
          },
          xl: {
            base: '[--main-ui-square-item-height:32px] gap-2 text-(length:--ui-font-size-2xl)/[normal] min-h-[46px] h-auto py-[6px] ps-[6px]',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]',
            input: 'text-(length:--ui-font-size-2xl)/[normal]',
            item: 'text-(length:--ui-font-size-xl)/(--main-ui-square-item-height) gap-1',
            itemDeleteIcon: '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'
        }
      },
      compoundVariants: [
        {
          highlight: false,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) has-focus-visible:ring-1 has-focus-visible:ring-inset has-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) has-focus-visible:ring-1 has-focus-visible:ring-inset has-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: 'has-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: {
        inputTags: {
          slots: {
            root: [
              'isolate relative inline-flex items-center',
              'flex-wrap'
            ],
            base: '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 pe-[39px]',
            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',
            item: '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:pointer-events-none data-disabled:select-none text-(--ui-color-design-tinted-content) bg-(--ui-color-design-tinted-bg-alt)',
            itemText: 'truncate max-w-[180px]',
            itemDelete: 'cursor-pointer inline-flex items-center disabled:pointer-events-none disabled:select-none text-(--b24ui-icon-color-secondary) hover:text-(--b24ui-icon-color-secondary-hover) transition-none',
            itemDeleteIcon: 'shrink-0',
            input: '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'
          },
          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] gap-1 text-(length:--ui-font-size-4xs)/[normal] min-h-[20px] h-auto py-[2px] ps-[4px]',
                leading: 'px-1',
                trailing: 'px-1',
                leadingIcon: 'size-[12px]',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-[12px]',
                input: 'text-(length:--ui-font-size-4xs)/[normal]',
                item: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
                itemDeleteIcon: 'size-[10px]'
              },
              xs: {
                base: '[--main-ui-square-item-height:16px] gap-1 text-(length:--ui-font-size-xs)/[normal] min-h-[24px] h-auto py-[2px] ps-[4px]',
                leading: 'px-1',
                trailing: 'px-1',
                leadingIcon: 'size-[14px]',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-[14px]',
                input: 'text-(length:--ui-font-size-xs)/[normal]',
                item: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
                itemDeleteIcon: 'size-[10px]'
              },
              sm: {
                base: '[--main-ui-square-item-height:20px] gap-1.5 text-(length:--ui-font-size-sm)/[normal] min-h-[28px] h-auto py-[4px] ps-[4px]',
                leading: 'px-1.5',
                trailing: 'px-1.5',
                leadingIcon: 'size-[16px]',
                leadingAvatar: 'size-[16px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[16px]',
                input: 'text-(length:--ui-font-size-sm)/[normal]',
                item: 'text-(length:--ui-font-size-5xs)/(--main-ui-square-item-height) gap-0.5',
                itemDeleteIcon: 'size-[12px]'
              },
              md: {
                base: '[--main-ui-square-item-height:24px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] min-h-[34px] h-auto py-[4px] ps-[4px]',
                leading: 'px-2',
                trailing: 'px-2',
                leadingIcon: 'size-[18px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[18px]',
                input: 'text-(length:--ui-font-size-lg)/[normal]',
                item: 'text-(length:--ui-font-size-sm)/(--main-ui-square-item-height) gap-[4px]',
                itemDeleteIcon: 'size-[18px]'
              },
              lg: {
                base: '[--main-ui-square-item-height:28px] gap-2 text-(length:--ui-font-size-lg)/[normal] min-h-[38px] h-auto py-[4px] ps-[4px]',
                leading: 'px-2',
                trailing: 'px-2',
                leadingIcon: 'size-[22px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[22px]',
                input: 'text-(length:--ui-font-size-lg)/[normal]',
                item: 'text-(length:--ui-font-size-md)/(--main-ui-square-item-height) gap-1',
                itemDeleteIcon: 'size-[22px]'
              },
              xl: {
                base: '[--main-ui-square-item-height:32px] gap-2 text-(length:--ui-font-size-2xl)/[normal] min-h-[46px] h-auto py-[6px] ps-[6px]',
                leading: 'px-2',
                trailing: 'px-2',
                leadingIcon: 'size-[22px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[22px]',
                input: 'text-(length:--ui-font-size-2xl)/[normal]',
                item: 'text-(length:--ui-font-size-xl)/(--main-ui-square-item-height) gap-1',
                itemDeleteIcon: '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'
            }
          },
          compoundVariants: [
            {
              highlight: false,
              noBorder: false,
              underline: false,
              class: {
                base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) has-focus-visible:ring-1 has-focus-visible:ring-inset has-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) has-focus-visible:ring-1 has-focus-visible:ring-inset has-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: 'has-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'
          }
        }
      }
    })
  ]
})

InputNumber

Provide numerical input with a flexible range setting.

InputTime

A time selection input field.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24