InputMenu

An autocomplete input with real-time suggestions.

Usage

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

Use this over an Input to take advantage of Radix Vue's Combobox component that offers autocomplete capabilities.

This component is similar to the SelectMenu but it's using an Input instead of a Select.

Items

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

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

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

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

label?: string
type?: "label" | "separator" | "item"
icon?: string
avatar?: AvatarProps
chip?: ChipProps
disabled?: boolean
onSelect?(e: Event): void

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

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

You can also pass an array of arrays to the items prop to display separated groups of items.

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

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

Value Key

You can choose to bind a single property of the object rather than the whole object by using the value-key prop. Defaults to undefined.

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

<template>
  <UInputMenu v-model="value" value-key="id" :items="items" />
</template>

Multiple

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

Backlog

Todo

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

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

Ensure to pass an array to the default-value prop or the v-model directive.

Delete Icon

With multiple, use the delete-icon prop to customize the delete Icon in the badges. Defaults to i-lucide-x.

deleteIcon

Backlog

Todo

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

<template>
  <UInputMenu v-model="value" multiple delete-icon="i-lucide-trash" :items="items" />
</template>

You can customize this icon globally in your app.config.ts under ui.icons.close key.

Placeholder

Use the placeholder prop to set a placeholder text.

placeholder

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

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

Create Item

Use the create-item prop to allow user input.

createItem

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

<template>
  <UInputMenu v-model="value" :items="items" create-item />
</template>

The create option shows when no match is found by default. Set it to always to show it even when similar values exist.

Use the @create event to handle the creation of the item. You will receive the event and the item as arguments.

Content

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

content.align

content.side

content.sideOffset

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

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

Arrow

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

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

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

Color

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

color

highlight

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

<template>
  <UInputMenu v-model="value" color="neutral" highlight :items="items" />
</template>

The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.

Variant

Use the variant prop to change the variant of the InputMenu.

color

variant

highlight

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

<template>
  <UInputMenu v-model="value" color="neutral" variant="subtle" :items="items" />
</template>

Size

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

size

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

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

Icon

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

icon

size

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

<template>
  <UInputMenu v-model="value" icon="i-lucide-search" :items="items" />
</template>

Trailing Icon

Use the trailing-icon prop to customize the trailing Icon. Defaults to i-lucide-chevron-down.

trailingIcon

size

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

<template>
  <UInputMenu v-model="value" trailing-icon="i-lucide-arrow-down" :items="items" />
</template>

You can customize this icon globally in your app.config.ts under ui.icons.chevronDown key.

Selected Icon

Use the selected-icon prop to customize the icon when an item is selected. Defaults to i-lucide-check.

selectedIcon

size

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

<template>
  <UInputMenu v-model="value" selected-icon="i-lucide-flame" :items="items" />
</template>

You can customize this icon globally in your app.config.ts under ui.icons.check key.

Avatar

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

avatar.src

<script setup lang="ts">
const items = ref(['Nuxt', 'NuxtHub', 'NuxtLabs', 'Nuxt Modules', 'Nuxt Community'])
const value = ref('Nuxt')
</script>

<template>
  <UInputMenu
    v-model="value"
    :avatar="{
      src: 'https://github.com/nuxt.png'
    }"
    :items="items"
  />
</template>

Loading

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

trailing

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

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

Loading Icon

Use the loading-icon prop to customize the loading icon. Defaults to i-lucide-refresh-ccw.

loadingIcon

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

<template>
  <UInputMenu v-model="value" loading loading-icon="i-lucide-repeat-2" :items="items" />
</template>

You can customize this icon globally in your app.config.ts under ui.icons.loading key.

Disabled

Use the disabled prop to disable the InputMenu.

disabled

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

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

Examples

With items type

You can use the type property with separator to display a separator between items or label to display a label.

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

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

With icons in items

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

<script setup lang="ts">
const items = ref([
  {
    label: 'Backlog',
    value: 'backlog',
    icon: 'i-lucide-circle-help'
  },
  {
    label: 'Todo',
    value: 'todo',
    icon: 'i-lucide-circle-plus'
  },
  {
    label: 'In Progress',
    value: 'in_progress',
    icon: 'i-lucide-circle-arrow-up'
  },
  {
    label: 'Done',
    value: 'done',
    icon: 'i-lucide-circle-check'
  }
])
const value = ref(items.value[0])
</script>

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

You can also use the #leading slot to display the selected icon.

With avatar in items

You can use the avatar property to display an Avatar inside the items.

<script setup lang="ts">
const items = ref([
  {
    label: 'benjamincanac',
    value: 'benjamincanac',
    avatar: {
      src: 'https://github.com/benjamincanac.png',
      alt: 'benjamincanac'
    }
  },
  {
    label: 'romhml',
    value: 'romhml',
    avatar: {
      src: 'https://github.com/romhml.png',
      alt: 'romhml'
    }
  },
  {
    label: 'noook',
    value: 'noook',
    avatar: {
      src: 'https://github.com/noook.png',
      alt: 'noook'
    }
  }
])
const value = ref(items.value[0])
</script>

<template>
  <UInputMenu v-model="value" :avatar="value?.avatar" :items="items" />
</template>

You can also use the #leading slot to display the selected avatar.

With chip in items

You can use the chip property to display a Chip inside the items.

<script setup lang="ts">
const items = ref([
  {
    label: 'bug',
    value: 'bug',
    chip: {
      color: 'error' as const
    }
  },
  {
    label: 'feature',
    value: 'feature',
    chip: {
      color: 'success' as const
    }
  },
  {
    label: 'enhancement',
    value: 'enhancement',
    chip: {
      color: 'info' as const
    }
  }
])
const value = ref(items.value[0])
</script>

<template>
  <UInputMenu v-model="value" :items="items">
    <template #leading="{ modelValue, ui }">
      <UChip
        v-if="modelValue"
        v-bind="modelValue.chip"
        inset
        standalone
        :size="ui.itemLeadingChipSize()"
        :class="ui.itemLeadingChip()"
      />
    </template>
  </UInputMenu>
</template>

In this example, the #leading slot is used to display the selected chip.

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

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

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

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

In this example, leveraging defineShortcuts, you can toggle the InputMenu by pressing O.

Control open state on focus

You can also use the @focus directive to control the open state.

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

<template>
  <UInputMenu
    v-model="selected"
    v-model:open="open"
    :items="items"
    @focus="open = true"
  />
</template>

Control search term

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

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

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

With rotating icon

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

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

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

With fetched items

You can fetch items from an API and use them in the InputMenu.

<script setup lang="ts">
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  transform: (data: { id: number, name: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    })) || []
  },
  lazy: true
})
</script>

<template>
  <UInputMenu
    :items="users || []"
    :loading="status === 'pending'"
    icon="i-lucide-user"
    placeholder="Select user"
  >
    <template #leading="{ modelValue, ui }">
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="ui.leadingAvatarSize()"
        :class="ui.leadingAvatar()"
      />
    </template>
  </UInputMenu>
</template>

Without internal search

Set the filter prop to false to disable the internal search and use your own search logic.

<script setup lang="ts">
const searchTerm = ref('')
const searchTermDebounced = refDebounced(searchTerm, 200)

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

<template>
  <UInputMenu
    v-model:search-term="searchTerm"
    :items="users || []"
    :loading="status === 'pending'"
    :filter="false"
    icon="i-lucide-user"
    placeholder="Select user"
  >
    <template #leading="{ modelValue, ui }">
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="ui.leadingAvatarSize()"
        :class="ui.leadingAvatar()"
      />
    </template>
  </UInputMenu>
</template>

This example uses refDebounced to debounce the API calls.

With custom search

Use the filter prop with an array of fields to filter on. Defaults to [labelKey].

<script setup lang="ts">
const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
  transform: (data: { id: number, name: string, email: string }[]) => {
    return data?.map(user => ({
      label: user.name,
      email: user.email,
      value: String(user.id),
      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
    })) || []
  },
  lazy: true
})
</script>

<template>
  <UInputMenu
    :items="users || []"
    :loading="status === 'pending'"
    :filter="['label', 'email']"
    icon="i-lucide-user"
    placeholder="Select user"
    class="w-80"
  >
    <template #leading="{ modelValue, ui }">
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="ui.leadingAvatarSize()"
        :class="ui.leadingAvatar()"
      />
    </template>

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

      <span class="text-[var(--ui-text-muted)]">
        {{ item.email }}
      </span>
    </template>
  </UInputMenu>
</template>

As a country picker

This example demonstrates using the InputMenu as a country picker with lazy loading - countries are only fetched when the menu is opened.

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

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

<template>
  <UInputMenu
    :items="countries || []"
    :loading="status === 'pending'"
    label-key="name"
    :search-input="{ icon: 'i-lucide-search' }"
    placeholder="Select country"
    class="w-48"
    @update:open="onOpen"
  >
    <template #leading="{ modelValue, ui }">
      <span v-if="modelValue" class="size-5 text-center">
        {{ modelValue?.emoji }}
      </span>
      <UIcon v-else name="i-lucide-earth" :class="ui.leadingIcon()" />
    </template>
    <template #item-leading="{ item }">
      <span class="size-5 text-center">
        {{ item.emoji }}
      </span>
    </template>
  </UInputMenu>
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`searchTerm`		`string` The controlled search term of the Combobox. Can be binded-with with v-model:searchTerm.
`id`		`string`
`type`	`"text"`	`"number" \| "reset" \| "submit" \| "button" \| "search" \| "text" \| "image" \| "color" \| string & {} \| "date" \| "time" \| "checkbox" \| "datetime-local" \| "email" \| "file" \| "hidden" \| "month" \| "password" \| "radio" \| "range" \| "tel" \| "url" \| "week"`
`placeholder`		`string` The placeholder text when the input is empty.
`color`	`primary`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`variant`	`outline`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`size`	`md`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`required`		`boolean`
`autofocus`		`boolean`
`autofocusDelay`	`0`	`number`
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`string` The icon displayed to open the menu.
`selectedIcon`	`appConfig.ui.icons.check`	`string` The icon displayed when an item is selected.
`deleteIcon`	`appConfig.ui.icons.close`	`string` The icon displayed to delete a tag. Works only when `multiple` is `true`.
`content`	`{ side: 'bottom', sideOffset: 8, position: 'popper' }`	`ComboboxContentProps` The content of the menu.
`arrow`	`false`	`boolean \| ComboboxArrowProps` Display an arrow alongside the menu.
`portal`	`true`	`boolean` Render the menu in a portal.
`filter`	`true`	`boolean \| string[]` Whether to filter items or not, can be an array of fields to filter. Defaults to `[labelKey]`. When `false`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.). `['label']`
`valueKey`	`undefined`	`string` When `items` is an array of objects, select the field to use as the value instead of the object itself.
`labelKey`	`"label" as never`	`string` When `items` is an array of objects, select the field to use as the label.
`items`		`(AcceptableValue \| InputMenuItem)[] \| (AcceptableValue \| InputMenuItem)[][]`
`highlight`		`boolean` Highlight the ring color like a focus state.
`createItem`	`false`	`boolean \| "always" \| { placement?: "top" \| "bottom" ; when?: "empty" \| "always" \| undefined; } \| undefined` Determines if custom user input that does not exist in options can be added.
`modelValue`		`any` The controlled value of the Combobox. Can be binded-with with `v-model`.
`multiple`		`boolean` Whether multiple options can be selected or not.
`defaultValue`		`string \| number \| false \| true \| Record<string, any> \| InputMenuItem \| (AcceptableValue \| InputMenuItem)[]` The value of the combobox when initially rendered. Use when you do not need to control the state of the Combobox
`disabled`		`boolean` When `true`, prevents the user from interacting with Combobox
`open`		`boolean` The controlled open state of the Combobox. Can be binded-with with `v-model:open`.
`defaultOpen`		`boolean` The open state of the combobox when it is initially rendered. Use when you do not need to control its open state.
`name`		`string` The name of the Combobox. Submitted with its owning form as part of a name/value pair.
`selectedValue`		`string \| number \| false \| true \| Record<string, any> \| InputMenuItem` The current highlighted value of the COmbobox. Can be binded-with `v-model:selectedValue`.
`resetSearchTermOnBlur`	`true`	`boolean` Whether to reset the searchTerm when the Combobox input blurred
`icon`		`string` Display an icon based on the `leading` and `trailing` props.
`avatar`		`AvatarProps` Display an avatar on the left side.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`leadingIcon`		`string` Display an icon on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`loadingIcon`	`appConfig.ui.icons.loading`	`string` The icon when the `loading` prop is `true`.
`ui`		`PartialString<{ root: string; base: string[]; leading: "absolute inset-y-0 start-0 flex items-center"; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75"; ... 21 more ...; tagsInput: strin...`

Slots

Slot	Type
`leading`	`{ modelValue: AcceptableValue \| InputMenuItem; open: boolean; ui: any; }`
`trailing`	`{ modelValue: AcceptableValue \| InputMenuItem; open: boolean; ui: any; }`
`empty`	`{ searchTerm?: string \| undefined; }`
`item`	`{ item: AcceptableValue \| InputMenuItem; index: number; }`
`item-leading`	`{ item: AcceptableValue \| InputMenuItem; index: number; }`
`item-label`	`{ item: AcceptableValue \| InputMenuItem; index: number; }`
`item-trailing`	`{ item: AcceptableValue \| InputMenuItem; index: number; }`
`tags-item-text`	`{ item: AcceptableValue \| InputMenuItem; index: number; }`
`tags-item-delete`	`{ item: AcceptableValue \| InputMenuItem; index: number; }`
`create-item-label`	`{ item: AcceptableValue \| InputMenuItem; }`

Emits

Event	Type
`blur`	`[payload: FocusEvent]`
`change`	`[payload: Event]`
`focus`	`[payload: FocusEvent]`
`update:modelValue`	`[payload: any]`
`update:open`	`[value: boolean]`
`update:searchTerm`	`[value: string]`
`update:selectedValue`	`[value: AcceptableValue \| InputMenuItem \| undefined]`
`create`	`[payload: Event, item: AcceptableValue \| InputMenuItem]`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    inputMenu: {
      slots: {
        root: 'relative inline-flex items-center',
        base: [
          'rounded-[calc(var(--ui-radius)*1.5)]',
          'transition-colors'
        ],
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-[var(--ui-text-dimmed)]',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75',
        trailingIcon: 'shrink-0 text-[var(--ui-text-dimmed)]',
        arrow: 'fill-[var(--ui-border)]',
        content: 'max-h-60 w-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
        viewport: 'divide-y divide-[var(--ui-border)] scroll-py-1',
        group: 'p-1 isolate',
        empty: 'py-2 text-center text-sm text-[var(--ui-text-muted)]',
        label: 'font-semibold text-[var(--ui-text-highlighted)]',
        separator: '-mx-1 my-1 h-px bg-[var(--ui-border)]',
        item: [
          'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75 text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50',
          'transition-colors before:transition-colors'
        ],
        itemLeadingIcon: [
          'shrink-0 text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]',
          'transition-colors'
        ],
        itemLeadingAvatar: 'shrink-0',
        itemLeadingAvatarSize: '',
        itemLeadingChip: 'shrink-0',
        itemLeadingChipSize: '',
        itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
        itemTrailingIcon: 'shrink-0',
        itemLabel: 'truncate',
        tagsItem: 'px-1.5 py-0.5 rounded-[var(--ui-radius)] font-medium inline-flex items-center gap-0.5 ring ring-inset ring-[var(--ui-border-accented)] bg-[var(--ui-bg-elevated)] text-[var(--ui-text)] data-disabled:cursor-not-allowed data-disabled:opacity-75',
        tagsItemText: 'truncate',
        tagsItemDelete: [
          'inline-flex items-center rounded-[calc(var(--ui-radius)/2)] text-[var(--ui-text-dimmed)] hover:text-[var(--ui-text)] hover:bg-[var(--ui-bg-accented)]/75 disabled:pointer-events-none',
          'transition-colors'
        ],
        tagsItemDeleteIcon: '',
        tagsInput: ''
      },
      variants: {
        buttonGroup: {
          horizontal: {
            root: 'group',
            base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
          },
          vertical: {
            root: 'group',
            base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        size: {
          xs: {
            base: 'px-2 py-1 text-xs gap-1',
            leading: 'ps-2',
            trailing: 'pe-2',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-4',
            label: 'p-1 text-[10px]/3 gap-1',
            item: 'p-1 text-xs gap-1',
            itemLeadingIcon: 'size-4',
            itemLeadingAvatarSize: '3xs',
            itemLeadingChip: 'size-4',
            itemLeadingChipSize: 'sm',
            itemTrailingIcon: 'size-4',
            tagsItem: 'text-[10px]/3',
            tagsItemDeleteIcon: 'size-3'
          },
          sm: {
            base: 'px-2.5 py-1.5 text-xs gap-1.5',
            leading: 'ps-2.5',
            trailing: 'pe-2.5',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-4',
            label: 'p-1.5 text-[10px]/3 gap-1.5',
            item: 'p-1.5 text-xs gap-1.5',
            itemLeadingIcon: 'size-4',
            itemLeadingAvatarSize: '3xs',
            itemLeadingChip: 'size-4',
            itemLeadingChipSize: 'sm',
            itemTrailingIcon: 'size-4',
            tagsItem: 'text-[10px]/3',
            tagsItemDeleteIcon: 'size-3'
          },
          md: {
            base: 'px-2.5 py-1.5 text-sm gap-1.5',
            leading: 'ps-2.5',
            trailing: 'pe-2.5',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-5',
            label: 'p-1.5 text-xs gap-1.5',
            item: 'p-1.5 text-sm gap-1.5',
            itemLeadingIcon: 'size-5',
            itemLeadingAvatarSize: '2xs',
            itemLeadingChip: 'size-5',
            itemLeadingChipSize: 'md',
            itemTrailingIcon: 'size-5',
            tagsItem: 'text-xs',
            tagsItemDeleteIcon: 'size-3.5'
          },
          lg: {
            base: 'px-3 py-2 text-sm gap-2',
            leading: 'ps-3',
            trailing: 'pe-3',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-5',
            label: 'p-2 text-xs gap-2',
            item: 'p-2 text-sm gap-2',
            itemLeadingIcon: 'size-5',
            itemLeadingAvatarSize: '2xs',
            itemLeadingChip: 'size-5',
            itemLeadingChipSize: 'md',
            itemTrailingIcon: 'size-5',
            tagsItem: 'text-xs',
            tagsItemDeleteIcon: 'size-3.5'
          },
          xl: {
            base: 'px-3 py-2 text-base gap-2',
            leading: 'ps-3',
            trailing: 'pe-3',
            leadingIcon: 'size-6',
            leadingAvatarSize: 'xs',
            trailingIcon: 'size-6',
            label: 'p-2 text-sm gap-2',
            item: 'p-2 text-base gap-2',
            itemLeadingIcon: 'size-6',
            itemLeadingAvatarSize: 'xs',
            itemLeadingChip: 'size-6',
            itemLeadingChipSize: 'lg',
            itemTrailingIcon: 'size-6',
            tagsItem: 'text-sm',
            tagsItemDeleteIcon: 'size-4'
          }
        },
        variant: {
          outline: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)]',
          soft: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg-elevated)]/50',
          subtle: 'text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)] ring ring-inset ring-[var(--ui-border-accented)]',
          ghost: 'text-[var(--ui-text-highlighted)] bg-transparent hover:bg-[var(--ui-bg-elevated)] focus:bg-[var(--ui-bg-elevated)] disabled:bg-transparent dark:disabled:bg-transparent',
          none: 'text-[var(--ui-text-highlighted)] bg-transparent'
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: ''
        },
        type: {
          file: 'file:me-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none'
        },
        multiple: {
          true: {
            root: 'flex-wrap',
            base: '',
            tagsInput: 'border-0 bg-transparent placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
          },
          false: {
            base: 'w-full border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
          }
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          multiple: true,
          variant: [
            'outline',
            'subtle'
          ],
          class: 'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--primary)]'
        },
        {
          color: 'neutral',
          multiple: true,
          variant: [
            'outline',
            'subtle'
          ],
          class: 'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ui-border-inverted)]'
        },
        {
          color: 'primary',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]'
        },
        {
          color: 'primary',
          highlight: true,
          class: 'ring ring-inset ring-[var(--ui-primary)]'
        },
        {
          color: 'neutral',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)]'
        },
        {
          color: 'neutral',
          highlight: true,
          class: 'ring ring-inset ring-[var(--ui-border-inverted)]'
        },
        {
          leading: true,
          size: 'xs',
          class: 'ps-7'
        },
        {
          leading: true,
          size: 'sm',
          class: 'ps-8'
        },
        {
          leading: true,
          size: 'md',
          class: 'ps-9'
        },
        {
          leading: true,
          size: 'lg',
          class: 'ps-10'
        },
        {
          leading: true,
          size: 'xl',
          class: 'ps-11'
        },
        {
          trailing: true,
          size: 'xs',
          class: 'pe-7'
        },
        {
          trailing: true,
          size: 'sm',
          class: 'pe-8'
        },
        {
          trailing: true,
          size: 'md',
          class: 'pe-9'
        },
        {
          trailing: true,
          size: 'lg',
          class: 'pe-10'
        },
        {
          trailing: true,
          size: 'xl',
          class: 'pe-11'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'animate-spin'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'animate-spin'
          }
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
})

Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Input

An input element to enter text.

InputNumber

Input numerical values with a customizable range.