v2.1.1
Use our Nuxt starter

InputDate

A date selection input field.
GitHub
Demo
Nuxt UI
DateFieldDateField

Usage

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

2
3
2022
{
  "wait": "Loading client-side content..."
}

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

2
6
2022
{
  "wait": "Loading client-side content..."
}

Range

Use the range prop to select a range of dates.

2
3
2022
2
20
2022
{
  "wait": "Loading client-side content..."
}

Color

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

mm
dd
yyyy
{
  "wait": "Loading client-side content..."
}

Tag

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

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

Use the tagColor property to set the color for Badge.

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

Size

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

mm
dd
yyyy
{
  "wait": "Loading client-side content..."
}

Separator Icon

Use the separator-icon prop to change the icon of the range separator.

mm
dd
yyyy
mm
dd
yyyy
{
  "wait": "Loading client-side content..."
}

Icon

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

mm
dd
yyyy
{
  "wait": "Loading client-side content..."
}

Avatar

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

mm
dd
yyyy
{
  "wait": "Loading client-side content..."
}

Loading

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

mm
dd
yyyy
{
  "wait": "Loading client-side content..."
}

Disabled

Use the disabled prop to disable the InputDate.

mm
dd
yyyy
{
  "wait": "Loading client-side content..."
}

No padding

Use the noPadding prop to removes padding from the InputDate.

mm
dd
yyyy
{
  "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 InputDate.

mm
dd
yyyy
{
  "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 InputDate.

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

Rounded

Use the rounded prop to round the InputDate.

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

Examples

With unavailable dates

Use the is-date-unavailable prop with a function to mark specific dates as unavailable.

1
1
2022
1
9
2022
{
  "wait": "Loading client-side content..."
}

With min/max dates

Use the min-value and max-value props to limit the dates.

9
10
2023
{
  "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-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot"

size

'md'

"xss" | "xs" | "sm" | "md" | "lg" | "xl"

noPadding

Removes padding from input

noBorder

Removes all borders (rings)

underline

Removes all borders (rings) except the bottom one

rounded

false

Rounds the corners of the input

tag
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

Highlight the ring color like a focus state.

autofocus
autofocusDelay

0

number

separatorIcon

icons.minus

The icon to use as a range separator.

range

Whether or not a range of dates can be selected

defaultValue

CalendarDate | CalendarDateTime | ZonedDateTime | DateRange

modelValue

null | CalendarDate | CalendarDateTime | ZonedDateTime | DateRange

icon

Display an icon on the left side.

avatar

AvatarProps

Display an avatar on the left side.

loading

When true, the loading icon will be displayed.

trailing

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

trailingIcon

IconComponent

Display an icon on the right side.

defaultPlaceholder

The default placeholder date

placeholder

The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view

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

"day" | "hour" | "minute" | "second"

The granularity to use for formatting times. Defaults to day if a CalendarDate 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

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

maxValue

The maximum date that can be selected

minValue

CalendarDate | CalendarDateTime | ZonedDateTime

The minimum date that can be selected

disabled

Whether or not the date field is disabled

readonly

Whether or not the date field is readonly

isDateUnavailable

(date: DateValue): boolean

A function that returns whether or not a date is unavailable

id

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.

b24ui

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

Slots

Slot Type
leading
default
trailing
separator

{ b24ui: object; }

Emits

Event Type
update:modelValue

[date: InputDateModelValue<boolean>]

update:placeholder

[date: DateValue] & [date: DateValue]

change

[event: Event]

blur
focus

[event: FocusEvent]

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    inputDate: {
      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 transition-colors focus:bg-(--ui-color-bg-content-secondary)',
        separatorIcon: 'shrink-0 size-4 text-(--ui-color-base-6)'
      },
      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: 'data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9'
          },
          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: 'data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9'
          },
          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: 'data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9'
          },
          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: 'data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11'
          },
          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: 'data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11'
          },
          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: 'data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13'
          }
        },
        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: {
        inputDate: {
          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 transition-colors focus:bg-(--ui-color-bg-content-secondary)',
            separatorIcon: 'shrink-0 size-4 text-(--ui-color-base-6)'
          },
          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: 'data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9'
              },
              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: 'data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9'
              },
              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: 'data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9'
              },
              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: 'data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11'
              },
              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: 'data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11'
              },
              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: 'data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13'
              }
            },
            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'
          }
        }
      }
    })
  ]
})

Input

An input box designed for text entry.

InputMenu

An input field with live autocomplete suggestions.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24