v2.1.1
Use our Nuxt starter

InputTime

A time selection input field.
GitHub
Demo
Nuxt UI
TimeFieldTimeField

Usage

Use the v-model directive to control the selected date.

12
30
PM
{
  "wait": "Loading client-side content..."
}

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

12
30
PM
{
  "wait": "Loading client-side content..."
}
This component relies on the @internationalized/date package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.

Hour Cycle

Use the hour-cycle prop to change the hour cycle of the InputTime. Defaults to 12.

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

Color

Use the color prop to change the color of the InputTime.

––
––
AM
{
  "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 InputTime.

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

Use the tagColor property to set the color for Badge.

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

Size

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

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

Icon

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

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

Avatar

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

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

Loading

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

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

Disabled

Use the disabled prop to disable the InputTime.

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

No padding

Use the noPadding prop to removes padding from the InputTime.

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

No border

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

––
––
AM
{
  "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 InputTime.

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

Rounded

Use the rounded prop to round the InputTime.

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

Examples

Within a FormField

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

12
30
PM
Specify the time
{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

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"

noPadding

false

boolean

Removes padding from input

noBorder

false

boolean

Removes all borders (rings)

underline

false

boolean

Removes all borders (rings) except the bottom one

rounded

false

boolean

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"

highlight

boolean

Highlight the ring color like a focus state.

autofocus

boolean

autofocusDelay

0

number

defaultValue

The default value for the calendar

defaultPlaceholder

The default placeholder date

placeholder

The placeholder date, which is used to determine what time to display when no time is selected. This updates as the user navigates the field

modelValue

null | Time | CalendarDateTime | ZonedDateTime

The controlled checked state of the field. Can be bound as v-model.

hourCycle

12 | 24

The hour cycle used for formatting times. Defaults to the local preference

step

DateStep

The stepping interval for the time fields. Defaults to 1.

granularity

"hour" | "minute" | "second"

The granularity to use for formatting times. Defaults to minute if a Time is provided, otherwise defaults to minute. The field will render segments for each part of the date up to and including the specified granularity

hideTimeZone

boolean

Whether or not to hide the time zone segment of the field

maxValue

The maximum date that can be selected

minValue

Time | CalendarDateTime | ZonedDateTime

The minimum date that can be selected

disabled

boolean

Whether or not the time field is disabled

readonly

boolean

Whether or not the time field is readonly

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.

required

boolean

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

icon

IconComponent

Display an icon on the left side.

avatar

AvatarProps

Display an avatar on the left side.

loading

boolean

When true, the loading icon will be displayed.

trailing

boolean

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

trailingIcon

IconComponent

Display an icon on the right side.

b24ui

{ base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; segment?: ClassNameValue; }

Slots

Slot Type
leading

{ b24ui: object; }

default

{ b24ui: object; }

trailing

{ b24ui: object; }

Emits

Event Type
blur
change

[event: Event]

focus

[event: FocusEvent]

update:modelValue

[date: TimeValue | undefined]

update:placeholder

[date: TimeValue]

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    inputTime: {
      slots: {
        base: 'group relative inline-flex items-center select-none transition-colors style-blurred-bg-input',
        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',
        segment: 'rounded text-center outline-hidden text-(--ui-color-base-1) data-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 data-[segment=literal]:text-(--ui-color-base-6) data-invalid:text-(--ui-color-accent-main-alert) data-disabled:cursor-not-allowed data-disabled:pointer-events-none data-disabled:select-none data-disabled:opacity-30 data-disabled:resize-none transition-colors focus:bg-(--ui-color-bg-content-secondary)'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group leading-none has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        noSplit: {
          false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
        },
        size: {
          xss: {
            base: 'h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal] gap-0.20 px-1',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[12px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[12px]',
            segment: 'not-data-[segment=literal]:w-6'
          },
          xs: {
            base: 'h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal] gap-0.25 px-2',
            leading: 'px-1',
            trailing: 'px-1',
            leadingIcon: 'size-[14px]',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-[14px]',
            segment: 'not-data-[segment=literal]:w-6'
          },
          sm: {
            base: 'h-[28px] gap-1.5 text-(length:--ui-font-size-sm)/[normal] gap-0.5 px-2',
            leading: 'px-1.5',
            trailing: 'px-1.5',
            leadingIcon: 'size-[16px]',
            leadingAvatar: 'size-[16px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[16px]',
            segment: 'not-data-[segment=literal]:w-6'
          },
          md: {
            base: 'h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] gap-0.5 px-3',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[18px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[18px]',
            segment: 'not-data-[segment=literal]:w-7'
          },
          lg: {
            base: 'h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal] gap-0.75 px-3',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]',
            segment: 'not-data-[segment=literal]:w-7'
          },
          xl: {
            base: 'h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal] gap-0.75 px-3',
            leading: 'px-2',
            trailing: 'px-2',
            leadingIcon: 'size-[22px]',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-[22px]',
            segment: 'not-data-[segment=literal]:w-8'
          }
        },
        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) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: false,
          class: {
            base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
          }
        },
        {
          noBorder: false,
          underline: true,
          class: {
            base: 'focus-visible:border-(--b24ui-border-color) hover:border-(--b24ui-border-color) data-[state=open]:border-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: false,
          underline: true,
          class: {
            base: 'ring-0 border-b-(--b24ui-border-color)'
          }
        },
        {
          highlight: true,
          noBorder: true,
          underline: false,
          class: {
            base: 'ring-0'
          }
        },
        {
          type: 'file',
          size: 'xss',
          class: 'py-[2px]'
        },
        {
          type: 'file',
          size: 'xs',
          class: 'py-[4px]'
        },
        {
          type: 'file',
          size: 'sm',
          class: 'py-[5px]'
        },
        {
          type: 'file',
          size: 'md',
          class: 'py-[7px]'
        },
        {
          type: 'file',
          size: 'lg',
          class: 'py-[9px]'
        },
        {
          type: 'file',
          size: 'xl',
          class: 'py-[11px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xss',
          class: 'ps-[20px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xs',
          class: 'ps-[22px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'sm',
          class: 'ps-[28px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'md',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'lg',
          class: 'ps-[32px]'
        },
        {
          leading: true,
          noPadding: false,
          size: 'xl',
          class: 'ps-[32px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xss',
          class: 'pe-[20px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xs',
          class: 'pe-[22px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'sm',
          class: 'pe-[28px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'md',
          class: 'pe-[34px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'lg',
          class: 'pe-[38px]'
        },
        {
          trailing: true,
          noPadding: false,
          size: 'xl',
          class: 'pe-[38px]'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'size-[21px]'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'size-[21px]'
          }
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: [
            'xl',
            'lg',
            'md'
          ],
          rounded: false,
          class: 'rounded-(--ui-border-radius-md)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'sm',
          rounded: false,
          class: 'rounded-(--ui-border-radius-sm)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xs',
          rounded: false,
          class: 'rounded-(--ui-border-radius-xs)'
        },
        {
          fieldGroup: [
            'horizontal',
            'vertical'
          ],
          size: 'xss',
          rounded: false,
          class: 'rounded-[5px]'
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        inputTime: {
          slots: {
            base: 'group relative inline-flex items-center select-none transition-colors style-blurred-bg-input',
            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',
            segment: 'rounded text-center outline-hidden text-(--ui-color-base-1) data-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 data-[segment=literal]:text-(--ui-color-base-6) data-invalid:text-(--ui-color-accent-main-alert) data-disabled:cursor-not-allowed data-disabled:pointer-events-none data-disabled:select-none data-disabled:opacity-30 data-disabled:resize-none transition-colors focus:bg-(--ui-color-bg-content-secondary)'
          },
          variants: {
            fieldGroup: {
              horizontal: {
                root: 'group leading-none has-focus-visible:z-[1]',
                base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-3xl group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0'
              },
              vertical: {
                root: 'group has-focus-visible:z-[1]',
                base: 'focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
              }
            },
            noSplit: {
              false: "group-not-only:not-first:after:content-[''] group-not-only:not-first:after:absolute group-not-only:not-first:after:top-[7px] group-not-only:not-first:after:bottom-[6px] group-not-only:not-first:after:left-0 group-not-only:not-first:after:w-px group-not-only:not-first:after:bg-current/30"
            },
            size: {
              xss: {
                base: 'h-[20px] gap-1 text-(length:--ui-font-size-4xs)/[normal] gap-0.20 px-1',
                leading: 'px-1',
                trailing: 'px-1',
                leadingIcon: 'size-[12px]',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-[12px]',
                segment: 'not-data-[segment=literal]:w-6'
              },
              xs: {
                base: 'h-[24px] gap-1 text-(length:--ui-font-size-xs)/[normal] gap-0.25 px-2',
                leading: 'px-1',
                trailing: 'px-1',
                leadingIcon: 'size-[14px]',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-[14px]',
                segment: 'not-data-[segment=literal]:w-6'
              },
              sm: {
                base: 'h-[28px] gap-1.5 text-(length:--ui-font-size-sm)/[normal] gap-0.5 px-2',
                leading: 'px-1.5',
                trailing: 'px-1.5',
                leadingIcon: 'size-[16px]',
                leadingAvatar: 'size-[16px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[16px]',
                segment: 'not-data-[segment=literal]:w-6'
              },
              md: {
                base: 'h-[34px] gap-1.5 text-(length:--ui-font-size-lg)/[normal] gap-0.5 px-3',
                leading: 'px-2',
                trailing: 'px-2',
                leadingIcon: 'size-[18px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[18px]',
                segment: 'not-data-[segment=literal]:w-7'
              },
              lg: {
                base: 'h-[38px] gap-2 text-(length:--ui-font-size-lg)/[normal] gap-0.75 px-3',
                leading: 'px-2',
                trailing: 'px-2',
                leadingIcon: 'size-[22px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[22px]',
                segment: 'not-data-[segment=literal]:w-7'
              },
              xl: {
                base: 'h-[46px] gap-2 text-(length:--ui-font-size-2xl)/[normal] gap-0.75 px-3',
                leading: 'px-2',
                trailing: 'px-2',
                leadingIcon: 'size-[22px]',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-[22px]',
                segment: 'not-data-[segment=literal]:w-8'
              }
            },
            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) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
              }
            },
            {
              highlight: true,
              noBorder: false,
              underline: false,
              class: {
                base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
              }
            },
            {
              noBorder: false,
              underline: true,
              class: {
                base: 'focus-visible:border-(--b24ui-border-color) hover:border-(--b24ui-border-color) data-[state=open]:border-(--b24ui-border-color)'
              }
            },
            {
              highlight: true,
              noBorder: false,
              underline: true,
              class: {
                base: 'ring-0 border-b-(--b24ui-border-color)'
              }
            },
            {
              highlight: true,
              noBorder: true,
              underline: false,
              class: {
                base: 'ring-0'
              }
            },
            {
              type: 'file',
              size: 'xss',
              class: 'py-[2px]'
            },
            {
              type: 'file',
              size: 'xs',
              class: 'py-[4px]'
            },
            {
              type: 'file',
              size: 'sm',
              class: 'py-[5px]'
            },
            {
              type: 'file',
              size: 'md',
              class: 'py-[7px]'
            },
            {
              type: 'file',
              size: 'lg',
              class: 'py-[9px]'
            },
            {
              type: 'file',
              size: 'xl',
              class: 'py-[11px]'
            },
            {
              leading: true,
              noPadding: false,
              size: 'xss',
              class: 'ps-[20px]'
            },
            {
              leading: true,
              noPadding: false,
              size: 'xs',
              class: 'ps-[22px]'
            },
            {
              leading: true,
              noPadding: false,
              size: 'sm',
              class: 'ps-[28px]'
            },
            {
              leading: true,
              noPadding: false,
              size: 'md',
              class: 'ps-[32px]'
            },
            {
              leading: true,
              noPadding: false,
              size: 'lg',
              class: 'ps-[32px]'
            },
            {
              leading: true,
              noPadding: false,
              size: 'xl',
              class: 'ps-[32px]'
            },
            {
              trailing: true,
              noPadding: false,
              size: 'xss',
              class: 'pe-[20px]'
            },
            {
              trailing: true,
              noPadding: false,
              size: 'xs',
              class: 'pe-[22px]'
            },
            {
              trailing: true,
              noPadding: false,
              size: 'sm',
              class: 'pe-[28px]'
            },
            {
              trailing: true,
              noPadding: false,
              size: 'md',
              class: 'pe-[34px]'
            },
            {
              trailing: true,
              noPadding: false,
              size: 'lg',
              class: 'pe-[38px]'
            },
            {
              trailing: true,
              noPadding: false,
              size: 'xl',
              class: 'pe-[38px]'
            },
            {
              loading: true,
              leading: true,
              class: {
                leadingIcon: 'size-[21px]'
              }
            },
            {
              loading: true,
              leading: false,
              trailing: true,
              class: {
                trailingIcon: 'size-[21px]'
              }
            },
            {
              fieldGroup: [
                'horizontal',
                'vertical'
              ],
              size: [
                'xl',
                'lg',
                'md'
              ],
              rounded: false,
              class: 'rounded-(--ui-border-radius-md)'
            },
            {
              fieldGroup: [
                'horizontal',
                'vertical'
              ],
              size: 'sm',
              rounded: false,
              class: 'rounded-(--ui-border-radius-sm)'
            },
            {
              fieldGroup: [
                'horizontal',
                'vertical'
              ],
              size: 'xs',
              rounded: false,
              class: 'rounded-(--ui-border-radius-xs)'
            },
            {
              fieldGroup: [
                'horizontal',
                'vertical'
              ],
              size: 'xss',
              rounded: false,
              class: 'rounded-[5px]'
            }
          ],
          defaultVariants: {
            color: 'air-primary',
            size: 'md'
          }
        }
      }
    })
  ]
})

InputTags

A tags input component with interactive tag elements.

PinInput

A PIN code input component.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24