v2.1.8
/
Use our Nuxt starter

InputNumber

Provide numerical input with a flexible range setting.
GitHub
Demo
Nuxt UI
NumberFieldNumberField

Usage

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

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

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

{
  "wait": "Loading client-side content..."
}
This component relies on the @internationalized/number package which provides utilities for formatting and parsing numbers across locales and numbering systems.

Min / Max

Use the min and max props to set the minimum and maximum values of the InputNumber.

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

Step

Use the step prop to set the step value of the InputNumber.

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

Orientation

Use the orientation prop to change the orientation of the InputNumber.

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

Placeholder

Use the placeholder prop to set a placeholder text.

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

Color

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

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

Tag

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

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

Use the tagColor property to set the color for Badge.

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

Size

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

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

Disabled

Use the disabled prop to disable the InputNumber.

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

Increment / Decrement

Use the increment and decrement props to customize the increment and decrement buttons with any Button props.

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

Increment / Decrement Icons

Use the increment-icon and decrement-icon props to customize the buttons Icon.

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

No border

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

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

Underline

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

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

Rounded

Use the rounded prop to round the InputMenu.

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

Examples

With decimal format

Use the format-options prop to customize the format of the value.

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

With percentage format

Use the format-options prop with style: 'percent' to customize the format of the value.

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

With currency format

Use the format-options prop with style: 'currency' to customize the format of the value.

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

Without buttons

You can use the increment and decrement props to control visibility of the buttons.

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

Within a FormField

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

Specify number of attempts
{
  "wait": "Loading client-side content..."
}

With slots

Use the #increment and #decrement slots to customize the buttons.

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

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.

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

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.

orientation'horizontal' "horizontal" | "vertical"

The orientation of the input menu.

incrementtrueboolean | ButtonProps

Configure the increment button. The size is inherited.

incrementIconicons.plusIconComponent

The icon displayed to increment the value.

incrementDisabledboolean

Disable the increment button.

decrementtrueboolean | ButtonProps

Configure the decrement button. The size is inherited.

decrementIconicons.minusIconComponent

The icon displayed to decrement the value.

decrementDisabledboolean

Disable the decrement button.

autofocusboolean
autofocusDelay number
modelModifiers Pick<ModelModifiers<InputNumberValue>, "optional">
modelValue null | number
defaultValue number
min number

The smallest value allowed for the input.

max number

The largest value allowed for the input.

step number

The amount that the input value changes with each increment or decrement "tick".

stepSnappingboolean

When false, prevents the value from snapping to the nearest increment of the step value

disabledboolean

When true, prevents the user from interacting with the Number Field.

requiredboolean

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

id string

Id of the element

name string

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

formatOptions Intl.NumberFormatOptions

Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.

disableWheelChangeboolean

When true, prevents the value from changing on wheel scroll.

invertWheelChangeboolean

When true, inverts the direction of the wheel change.

readonlyboolean

When true, the Number Field is read-only.

autocomplete string
list string
b24ui { root?: ClassNameValue; base?: ClassNameValue; increment?: ClassNameValue; decrement?: ClassNameValue; tag?: ClassNameValue; }
This component also supports all native <input> HTML attributes.

Slots

Slot Type
increment{}
decrement{}

Emits

Event Type
update:modelValue[value: InputNumberValue]
blur[event: FocusEvent]
change[event: Event]

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: {
    inputNumber: {
      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:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap',
        increment: 'absolute flex items-center',
        decrement: 'absolute flex items-center',
        tag: 'pointer-events-none select-none absolute z-10 -top-[7px] right-[14px] flex flex-col justify-center items-center'
      },
      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: 'px-2 h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal]',
          xs: 'px-2 h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal]',
          sm: 'px-2.5 h-[28px] gap-1.5 text-(length:--ui-font-size-sm)/[normal]',
          md: 'px-2.5 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal]',
          lg: 'px-3 h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal]',
          xl: 'px-3 h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal]'
        },
        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)'
        },
        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)'
        },
        disabled: {
          true: {
            increment: 'cursor-not-allowed',
            decrement: 'cursor-not-allowed'
          }
        },
        orientation: {
          horizontal: {
            base: 'text-center',
            increment: 'inset-y-0 end-0 py-0 pe-0 [&>button]:p-1',
            decrement: 'inset-y-0 start-0 py-0 ps-0 [&>button]:p-1'
          },
          vertical: {
            increment: 'top-1 end-0 pe-1 [&>button]:p-0',
            decrement: 'bottom-1 end-0 pe-1 [&>button]:p-0'
          }
        },
        highlight: {
          true: ''
        },
        increment: {
          false: ''
        },
        decrement: {
          false: ''
        }
      },
      compoundVariants: [
        {
          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: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)'
          }
        },
        {
          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)'
          }
        },
        {
          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'
          }
        },
        {
          orientation: 'horizontal',
          rounded: true,
          class: {
            increment: '[&>button]:rounded-3xl',
            decrement: '[&>button]:rounded-3xl'
          }
        },
        {
          orientation: 'horizontal',
          decrement: false,
          class: {
            base: 'text-start'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xss',
          class: {
            increment: '[&>button]:p-[2px] [&>button]:h-[24px] scale-70',
            decrement: '[&>button]:p-[2px] [&>button]:h-[24px] scale-70'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xs',
          class: {
            increment: '[&>button]:p-[2px] [&>button]:h-[24px] scale-70',
            decrement: '[&>button]:p-[2px] [&>button]:h-[24px] scale-70'
          }
        },
        {
          orientation: 'horizontal',
          size: 'sm',
          class: {
            increment: '[&>button]:p-[2px] scale-70',
            decrement: '[&>button]:p-[2px] scale-70'
          }
        },
        {
          orientation: 'horizontal',
          size: 'md',
          class: {
            increment: '[&>button]:p-[2px] scale-60',
            decrement: '[&>button]:p-[2px] scale-60'
          }
        },
        {
          orientation: 'horizontal',
          size: 'lg',
          class: {
            increment: '[&>button]:p-[2px] scale-60',
            decrement: '[&>button]:p-[2px] scale-60'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xl',
          class: {
            increment: '[&>button]:p-[4px] scale-60',
            decrement: '[&>button]:p-[4px] scale-60'
          }
        },
        {
          orientation: 'vertical',
          size: 'xss',
          class: {
            increment: 'top-0 pe-0 [&>button]:h-[13px] scale-56',
            decrement: 'bottom-0 pe-0 [&>button]:h-[13px] scale-56'
          }
        },
        {
          orientation: 'vertical',
          size: 'xs',
          class: {
            increment: 'top-0 pe-0 [&>button]:h-[13px] scale-80',
            decrement: 'bottom-0 pe-0 [&>button]:h-[13px] scale-80'
          }
        },
        {
          orientation: 'vertical',
          size: 'sm',
          class: {
            increment: 'top-0 pe-0 [&>button]:h-[15px] scale-80',
            decrement: 'bottom-0 pe-0 [&>button]:h-[15px] scale-80'
          }
        },
        {
          orientation: 'vertical',
          size: 'md',
          class: {
            increment: 'top-0 pe-0 [&>button]:h-[18px] scale-80',
            decrement: 'bottom-0 pe-0 [&>button]:h-[18px] scale-80'
          }
        },
        {
          orientation: 'vertical',
          size: 'lg',
          class: {
            increment: '[&>button]:h-[16px] scale-80',
            decrement: '[&>button]:h-[16px] scale-80'
          }
        },
        {
          orientation: 'vertical',
          size: 'xl',
          class: {
            increment: '[&>button]:h-[20px] scale-80',
            decrement: '[&>button]:h-[20px] scale-80'
          }
        },
        {
          decrement: true,
          size: 'xss',
          class: {
            base: 'ps-[24px]'
          }
        },
        {
          decrement: true,
          size: 'xs',
          class: {
            base: 'ps-[24px]'
          }
        },
        {
          decrement: true,
          size: 'sm',
          class: {
            base: 'ps-[28px]'
          }
        },
        {
          decrement: true,
          size: 'md',
          class: {
            base: 'ps-[30px]'
          }
        },
        {
          decrement: true,
          size: 'lg',
          class: {
            base: 'ps-[30px]'
          }
        },
        {
          decrement: true,
          size: 'xl',
          class: {
            base: 'ps-[40px]'
          }
        },
        {
          increment: true,
          size: 'xss',
          class: {
            base: 'pe-[24px]'
          }
        },
        {
          increment: true,
          size: 'xs',
          class: {
            base: 'pe-[24px]'
          }
        },
        {
          increment: true,
          size: 'sm',
          class: {
            base: 'pe-[30px]',
            increment: 'top-0 pe-0 [&>button]:h-[15px] scale-80',
            decrement: 'bottom-0 pe-0 [&>button]:h-[15px] scale-80'
          }
        },
        {
          increment: true,
          size: 'md',
          class: {
            base: 'pe-[34px]'
          }
        },
        {
          increment: true,
          size: 'lg',
          class: {
            base: 'pe-[38px]'
          }
        },
        {
          increment: true,
          size: 'xl',
          class: {
            base: 'pe-[38px]'
          }
        },
        {
          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: {
        inputNumber: {
          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:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) align-middle text-ellipsis whitespace-nowrap',
            increment: 'absolute flex items-center',
            decrement: 'absolute flex items-center',
            tag: 'pointer-events-none select-none absolute z-10 -top-[7px] right-[14px] flex flex-col justify-center items-center'
          },
          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: 'px-2 h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal]',
              xs: 'px-2 h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal]',
              sm: 'px-2.5 h-[28px] gap-1.5 text-(length:--ui-font-size-sm)/[normal]',
              md: 'px-2.5 h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal]',
              lg: 'px-3 h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal]',
              xl: 'px-3 h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal]'
            },
            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)'
            },
            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)'
            },
            disabled: {
              true: {
                increment: 'cursor-not-allowed',
                decrement: 'cursor-not-allowed'
              }
            },
            orientation: {
              horizontal: {
                base: 'text-center',
                increment: 'inset-y-0 end-0 py-0 pe-0 [&>button]:p-1',
                decrement: 'inset-y-0 start-0 py-0 ps-0 [&>button]:p-1'
              },
              vertical: {
                increment: 'top-1 end-0 pe-1 [&>button]:p-0',
                decrement: 'bottom-1 end-0 pe-1 [&>button]:p-0'
              }
            },
            highlight: {
              true: ''
            },
            increment: {
              false: ''
            },
            decrement: {
              false: ''
            }
          },
          compoundVariants: [
            {
              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: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)'
              }
            },
            {
              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)'
              }
            },
            {
              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'
              }
            },
            {
              orientation: 'horizontal',
              rounded: true,
              class: {
                increment: '[&>button]:rounded-3xl',
                decrement: '[&>button]:rounded-3xl'
              }
            },
            {
              orientation: 'horizontal',
              decrement: false,
              class: {
                base: 'text-start'
              }
            },
            {
              orientation: 'horizontal',
              size: 'xss',
              class: {
                increment: '[&>button]:p-[2px] [&>button]:h-[24px] scale-70',
                decrement: '[&>button]:p-[2px] [&>button]:h-[24px] scale-70'
              }
            },
            {
              orientation: 'horizontal',
              size: 'xs',
              class: {
                increment: '[&>button]:p-[2px] [&>button]:h-[24px] scale-70',
                decrement: '[&>button]:p-[2px] [&>button]:h-[24px] scale-70'
              }
            },
            {
              orientation: 'horizontal',
              size: 'sm',
              class: {
                increment: '[&>button]:p-[2px] scale-70',
                decrement: '[&>button]:p-[2px] scale-70'
              }
            },
            {
              orientation: 'horizontal',
              size: 'md',
              class: {
                increment: '[&>button]:p-[2px] scale-60',
                decrement: '[&>button]:p-[2px] scale-60'
              }
            },
            {
              orientation: 'horizontal',
              size: 'lg',
              class: {
                increment: '[&>button]:p-[2px] scale-60',
                decrement: '[&>button]:p-[2px] scale-60'
              }
            },
            {
              orientation: 'horizontal',
              size: 'xl',
              class: {
                increment: '[&>button]:p-[4px] scale-60',
                decrement: '[&>button]:p-[4px] scale-60'
              }
            },
            {
              orientation: 'vertical',
              size: 'xss',
              class: {
                increment: 'top-0 pe-0 [&>button]:h-[13px] scale-56',
                decrement: 'bottom-0 pe-0 [&>button]:h-[13px] scale-56'
              }
            },
            {
              orientation: 'vertical',
              size: 'xs',
              class: {
                increment: 'top-0 pe-0 [&>button]:h-[13px] scale-80',
                decrement: 'bottom-0 pe-0 [&>button]:h-[13px] scale-80'
              }
            },
            {
              orientation: 'vertical',
              size: 'sm',
              class: {
                increment: 'top-0 pe-0 [&>button]:h-[15px] scale-80',
                decrement: 'bottom-0 pe-0 [&>button]:h-[15px] scale-80'
              }
            },
            {
              orientation: 'vertical',
              size: 'md',
              class: {
                increment: 'top-0 pe-0 [&>button]:h-[18px] scale-80',
                decrement: 'bottom-0 pe-0 [&>button]:h-[18px] scale-80'
              }
            },
            {
              orientation: 'vertical',
              size: 'lg',
              class: {
                increment: '[&>button]:h-[16px] scale-80',
                decrement: '[&>button]:h-[16px] scale-80'
              }
            },
            {
              orientation: 'vertical',
              size: 'xl',
              class: {
                increment: '[&>button]:h-[20px] scale-80',
                decrement: '[&>button]:h-[20px] scale-80'
              }
            },
            {
              decrement: true,
              size: 'xss',
              class: {
                base: 'ps-[24px]'
              }
            },
            {
              decrement: true,
              size: 'xs',
              class: {
                base: 'ps-[24px]'
              }
            },
            {
              decrement: true,
              size: 'sm',
              class: {
                base: 'ps-[28px]'
              }
            },
            {
              decrement: true,
              size: 'md',
              class: {
                base: 'ps-[30px]'
              }
            },
            {
              decrement: true,
              size: 'lg',
              class: {
                base: 'ps-[30px]'
              }
            },
            {
              decrement: true,
              size: 'xl',
              class: {
                base: 'ps-[40px]'
              }
            },
            {
              increment: true,
              size: 'xss',
              class: {
                base: 'pe-[24px]'
              }
            },
            {
              increment: true,
              size: 'xs',
              class: {
                base: 'pe-[24px]'
              }
            },
            {
              increment: true,
              size: 'sm',
              class: {
                base: 'pe-[30px]',
                increment: 'top-0 pe-0 [&>button]:h-[15px] scale-80',
                decrement: 'bottom-0 pe-0 [&>button]:h-[15px] scale-80'
              }
            },
            {
              increment: true,
              size: 'md',
              class: {
                base: 'pe-[34px]'
              }
            },
            {
              increment: true,
              size: 'lg',
              class: {
                base: 'pe-[38px]'
              }
            },
            {
              increment: true,
              size: 'xl',
              class: {
                base: 'pe-[38px]'
              }
            },
            {
              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'
          }
        }
      }
    })
  ]
})

InputMenu

An input field with live autocomplete suggestions.

InputTags

A tags input component with interactive tag elements.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24