v3.0.0-alpha.5
Components

InputMenu

ComboboxGitHub
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:

<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-heroicons-x-mark-20-solid.

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-heroicons-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.

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

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

Content

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

<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>

Color

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

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

<template>
  <UInputMenu v-model="value" color="gray" 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.

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

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

Size

Use the size prop to change the size 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" size="xl" :items="items" />
</template>

Icon

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

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

<template>
  <UInputMenu
    v-model="value"
    icon="i-heroicons-magnifying-glass"
    :items="items"
  />
</template>

Trailing Icon

Use the trailing-icon prop to customize the trailing Icon. Defaults to i-heroicons-chevron-down-20-solid.

<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-heroicons-arrow-small-down-20-solid"
    :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-heroicons-check-20-solid.

<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-heroicons-fire" :items="items" />
</template>
You can customize this icon globally in your app.config.ts under ui.icons.check key.

Loading

Use the loading prop to show a loading icon 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" loading :items="items" />
</template>

Loading Icon

Use the loading-icon prop to customize the loading icon. Defaults to i-heroicons-arrow-path-20-solid.

<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-heroicons-arrow-path-rounded-square"
    :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.

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

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

Examples

With typed items

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-heroicons-question-mark-circle'
  },
  {
    label: 'Todo',
    value: 'todo',
    icon: 'i-heroicons-plus-circle'
  },
  {
    label: 'In Progress',
    value: 'in_progress',
    icon: 'i-heroicons-arrow-up-circle'
  },
  {
    label: 'Done',
    value: 'done',
    icon: 'i-heroicons-check-circle'
  }
])
const selected = ref(items.value[0])
</script>

<template>
  <UInputMenu v-model="selected" :icon="selected?.icon" :items="items" class="w-40" />
</template>
You can also use the #leading slot to display the selected icon, like in the next example.

With avatar in items

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

b
<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 selected = ref(items.value[0])
</script>

<template>
  <UInputMenu v-model="selected" :items="items" class="w-40">
    <template #leading="{ modelValue, ui }">
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="ui.itemLeadingAvatarSize()"
        :class="ui.itemLeadingAvatar()"
      />
    </template>
  </UInputMenu>
</template>
In this example, the #leading slot is used 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: 'red' as const
    }
  },
  {
    label: 'enhancement',
    value: 'enhancement',
    chip: {
      color: 'blue' as const
    }
  },
  {
    label: 'feature',
    value: 'feature',
    chip: {
      color: 'violet' as const
    }
  }
])
const selected = ref(items.value[0])
</script>

<template>
  <UInputMenu v-model="selected" :items="items" class="w-40">
    <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 selected = ref('Backlog')

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

<template>
  <UInputMenu v-model="selected" v-model:open="open" :items="items" />
</template>
In this example, press O to toggle the InputMenu.

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 selected = ref('Backlog')
</script>

<template>
  <UInputMenu v-model="selected" 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 selected = ref('Backlog')
</script>

<template>
  <UInputMenu
    v-model="selected"
    :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-heroicons-user"
    placeholder="Select user"
    class="w-48"
  >
    <template #leading="{ modelValue, ui }">
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="ui.itemLeadingAvatarSize()"
        :class="ui.itemLeadingAvatar()"
      />
    </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-heroicons-user"
    placeholder="Select user"
    class="w-48"
  >
    <template #leading="{ modelValue, ui }">
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="ui.itemLeadingAvatarSize()"
        :class="ui.itemLeadingAvatar()"
      />
    </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.

<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="['name', 'email']"
    icon="i-heroicons-user"
    placeholder="Select user"
    class="w-80"
  >
    <template #leading="{ modelValue, ui }">
      <UAvatar
        v-if="modelValue"
        v-bind="modelValue.avatar"
        :size="ui.itemLeadingAvatarSize()"
        :class="ui.itemLeadingAvatar()"
      />
    </template>

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

      <span class="text-gray-500 dark:text-gray-400">
        {{ item.email }}
      </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" | "color" | "image" | "button" | "date" | "time" | string & {} | "text" | "search" | "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" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "gray"

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' }

Omit<ComboboxContentProps, "asChild" | "as" | "forceMount">

The content of the menu.

arrow

false

boolean | Omit<ComboboxArrowProps, "asChild" | "as">

Display an arrow alongside the menu.

portal

true

boolean

Render the menu in a portal.

filter

["label"]

boolean | string[]

Whether to filter items or not, can be an array of fields to filter. When false, items will not be filtered which is useful for custom filtering.

valueKey

undefined

undefined

When items is an array of objects, select the field to use as the value instead of the object itself.

items

(InputMenuItem | AcceptableValue)[] | (InputMenuItem | AcceptableValue)[][]

highlight

boolean

Highlight the ring color like a focus state.

multiple

boolean

Whether multiple options can be selected or not.

defaultValue

string | number | false | true | Record<string, any> | InputMenuItem | (InputMenuItem | AcceptableValue)[]

The value of the combobox when initially rendered. Use when you do not need to control the state of the Combobox

modelValue

string | number | false | true | Record<string, any> | InputMenuItem | (InputMenuItem | AcceptableValue)[]

The controlled value of the Combobox. Can be binded-with with v-model.

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.

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; trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75"; ... 21 more ...; tagsInput: string; }>

Slots

Slot Type
leading

{ modelValue: InputMenuItem | AcceptableValue; open: boolean; ui: any; }

trailing

{ modelValue: InputMenuItem | AcceptableValue; open: boolean; ui: any; }

empty

{ searchTerm?: string | undefined; }

item

{ item: InputMenuItem | AcceptableValue; index: number; }

item-leading

{ item: InputMenuItem | AcceptableValue; index: number; }

item-label

{ item: InputMenuItem | AcceptableValue; index: number; }

item-trailing

{ item: InputMenuItem | AcceptableValue; index: number; }

tags-item-text

{ item: InputMenuItem | AcceptableValue; index: number; }

tags-item-delete

{ item: InputMenuItem | AcceptableValue; index: number; }

Emits

Event Type
blur

[payload: FocusEvent]

change

[payload: Event]

focus

[payload: FocusEvent]

update:modelValue

[value: InputMenuItem | AcceptableValue]

update:open

[value: boolean]

update:searchTerm

[value: string]

update:selectedValue

[value: InputMenuItem | AcceptableValue | undefined]

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    inputMenu: {
      slots: {
        root: 'relative inline-flex items-center',
        base: [
          'rounded-md',
          'transition-colors'
        ],
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-gray-400 dark:text-gray-500',
        leadingAvatar: 'shrink-0',
        trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75',
        trailingIcon: 'shrink-0 text-gray-400 dark:text-gray-500',
        arrow: 'fill-gray-200 dark:fill-gray-800',
        content: 'max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
        viewport: 'divide-y divide-gray-200 dark:divide-gray-800 scroll-py-1',
        group: 'p-1 isolate',
        empty: 'py-2 text-center text-sm text-gray-500 dark:text-gray-400',
        label: 'font-semibold text-gray-900 dark:text-white',
        separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
        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-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50',
          'transition-colors before:transition-colors'
        ],
        itemLeadingIcon: [
          'shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200',
          '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 font-medium inline-flex items-center gap-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 data-disabled:cursor-not-allowed data-disabled:opacity-75',
        tagsItemText: 'truncate',
        tagsItemDelete: [
          'inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none',
          'transition-colors'
        ],
        tagsItemDeleteIcon: '',
        tagsInput: 'border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
      },
      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: 'pl-2',
            trailing: 'pr-2',
            leadingIcon: 'size-4',
            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: 'pl-2.5',
            trailing: 'pr-2.5',
            leadingIcon: 'size-4',
            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: 'pl-2.5',
            trailing: 'pr-2.5',
            leadingIcon: 'size-5',
            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: 'pl-3',
            trailing: 'pr-3',
            leadingIcon: 'size-5',
            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: 'pl-3',
            trailing: 'pr-3',
            leadingIcon: 'size-6',
            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-gray-900 dark:text-white bg-white dark:bg-gray-900 ring ring-inset ring-gray-300 dark:ring-gray-700',
          soft: 'text-gray-900 dark:text-white bg-gray-50 hover:bg-gray-100 focus:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-gray-800/50',
          subtle: 'text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 ring ring-inset ring-gray-300 dark:ring-gray-700',
          ghost: 'text-gray-900 dark:text-white hover:bg-gray-100 focus:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus:bg-gray-800 dark:disabled:bg-transparent',
          none: 'text-gray-900 dark:text-white'
        },
        color: {
          primary: '',
          error: '',
          red: '',
          orange: '',
          amber: '',
          yellow: '',
          lime: '',
          green: '',
          emerald: '',
          teal: '',
          cyan: '',
          sky: '',
          blue: '',
          indigo: '',
          violet: '',
          purple: '',
          fuchsia: '',
          pink: '',
          rose: '',
          gray: ''
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: ''
        },
        type: {
          file: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:outline-none'
        },
        multiple: {
          true: {
            root: 'flex-wrap',
            base: ''
          },
          false: {
            base: 'w-full rounded-md border-0 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-primary-500 dark:has-[:focus-visible]:ring-primary-400'
        },
        {
          color: 'gray',
          multiple: true,
          variant: [
            'outline',
            'subtle'
          ],
          class: 'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-gray-500 dark:has-[:focus-visible]:ring-white'
        },
        {
          color: 'primary',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
        },
        {
          color: 'primary',
          highlight: true,
          class: 'ring ring-inset ring-primary-500 dark:ring-primary-400'
        },
        {
          color: 'gray',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-gray-900 dark:focus-visible:ring-white'
        },
        {
          color: 'gray',
          highlight: true,
          class: 'ring ring-inset ring-gray-900 dark:ring-white'
        },
        {
          leading: true,
          size: 'xs',
          class: 'pl-7'
        },
        {
          leading: true,
          size: 'sm',
          class: 'pl-8'
        },
        {
          leading: true,
          size: 'md',
          class: 'pl-9'
        },
        {
          leading: true,
          size: 'lg',
          class: 'pl-10'
        },
        {
          leading: true,
          size: 'xl',
          class: 'pl-11'
        },
        {
          trailing: true,
          size: 'xs',
          class: 'pr-7'
        },
        {
          trailing: true,
          size: 'sm',
          class: 'pr-8'
        },
        {
          trailing: true,
          size: 'md',
          class: 'pr-9'
        },
        {
          trailing: true,
          size: 'lg',
          class: 'pr-10'
        },
        {
          trailing: true,
          size: 'xl',
          class: 'pr-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.

Keyboard Key

A kbd element to display a keyboard key.