InputMenu

Um campo de autocomplete com sugestões em tempo real.

Uso

Use a diretiva v-model para controlar o valor do InputMenu ou a prop default-value para definir o valor inicial quando você não precisa controlar o estado.

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Use este no lugar de um Input para aproveitar o componente Combobox do Reka UI, que oferece recursos de autocomplete.

Este componente é semelhante ao SelectMenu, mas usa um Input em vez de um Select.

Itens

Use a prop items como um array de strings, números ou booleanos:

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Você também pode passar um array de objetos com as seguintes propriedades:

label?: string
type?: "label" | "separator" | "item"
icon?: string
avatar?: AvatarProps
chip?: ChipProps
disabled?: boolean
onSelect?: (e: Event) => void
class?: any
ui?: { tagsItem?: ClassNameValue, tagsItemText?: ClassNameValue, tagsItemDelete?: ClassNameValue, tagsItemDeleteIcon?: ClassNameValue, label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }

<script setup lang="ts">
import type { InputMenuItem } from '@nitro/ui'

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

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

<script setup lang="ts">
import { ref } from 'vue'
import type { InputMenuItem } from '@nitro/ui'

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

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

Você também pode passar um array de arrays para a prop items para exibir grupos separados de itens.

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Chave de valor

Você pode optar por vincular uma única propriedade do objeto em vez do objeto inteiro usando a prop value-key. O padrão é undefined.

<script setup lang="ts">
import type { InputMenuItem } from '@nitro/ui'

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

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

<script setup lang="ts">
import { ref } from 'vue'
import type { InputMenuItem } from '@nitro/ui'

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

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

Use a prop by para comparar objetos por um campo em vez de por referência quando o model-value for um objeto.

Múltiplo

Use a prop multiple para permitir múltiplas seleções; os itens selecionados serão exibidos como tags.

Backlog

Todo

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Certifique-se de passar um array para a prop default-value ou para a diretiva v-model.

Ícone de excluir

Com multiple, use a prop delete-icon para personalizar o Icon de exclusão nas tags. O padrão é 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>
  <NInputMenu v-model="value" multiple delete-icon="i-lucide-trash" :items="items" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

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

Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.close.

Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.close.

Placeholder

Use a prop placeholder para definir um texto de placeholder.

placeholder

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Modo 4.8+

Defina a prop mode como autocomplete para transformar o InputMenu em um campo de texto livre com sugestões. O modelValue passa a ser o texto do input (string) em vez de um item selecionado.

Quando mode é autocomplete, multiple, by, resetSearchTermOnSelect e resetModelValueOnClear não são aplicáveis.

Use a prop content.hideWhenEmpty para ocultar o menu quando não há sugestões correspondentes.

Conteúdo

Use a prop content para controlar como o conteúdo do InputMenu é renderizado, como seu align ou side, por exemplo.

content.align

content.side

content.sideOffset

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Seta

Use a prop arrow para exibir uma seta no InputMenu.

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Cor

Use a prop color para alterar a cor do ring quando o InputMenu está em foco.

color

highlight

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

A prop highlight é usada aqui para mostrar o estado de foco. Ela é usada internamente quando ocorre um erro de validação.

Variante

Use a prop variant para alterar a variante do InputMenu.

color

variant

highlight

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Tamanho

Use a prop size para alterar o tamanho do InputMenu.

size

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Ícone

Use a prop icon para exibir um Icon dentro do InputMenu.

icon

size

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Ícone à direita

Use a prop trailing-icon para personalizar o Icon à direita. O padrão é i-lucide-chevron-down.

trailingIcon

size

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.chevronDown.

Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.chevronDown.

Ícone de selecionado

Use a prop selected-icon para personalizar o ícone quando um item é selecionado. O padrão é i-lucide-check.

selectedIcon

size

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.check.

Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.check.

Limpar 4.4+

Use a prop clear para exibir um botão de limpar quando um valor está selecionado.

clear

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Ícone de limpar 4.4+

Use a prop clear-icon para personalizar o Icon do botão de limpar. O padrão é i-lucide-x.

clear

clearIcon

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

<template>
  <NInputMenu v-model="value" clear clear-icon="i-lucide-trash" :items="items" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <NInputMenu v-model="value" clear clear-icon="i-lucide-trash" :items="items" />
</template>

Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.close.

Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.close.

Avatar

Use a prop avatar para exibir um Avatar dentro do InputMenu.

avatar.src

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Carregando

Use a prop loading para exibir um ícone de carregamento no InputMenu.

trailing

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Ícone de carregamento

Use a prop loading-icon para personalizar o ícone de carregamento. O padrão é i-lucide-loader-circle.

loadingIcon

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

<template>
  <NInputMenu v-model="value" loading loading-icon="i-lucide-loader" :items="items" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <NInputMenu v-model="value" loading loading-icon="i-lucide-loader" :items="items" />
</template>

Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.loading.

Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.loading.

Desabilitado

Use a prop disabled para desabilitar o InputMenu.

disabled

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Exemplos

Com tipo de itens

Você pode usar a propriedade type com separator para exibir um separador entre os itens ou label para exibir um rótulo.

<script setup lang="ts">
import type { InputMenuItem } from '@nitro/ui'

const items = ref<InputMenuItem[]>([
  {
    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>
  <NInputMenu v-model="value" :items="items" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { InputMenuItem } from '@nitro/ui'

const items = ref<InputMenuItem[]>([
  {
    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>
  <NInputMenu v-model="value" :items="items" />
</template>

Com ícone nos itens

Você pode usar a propriedade icon para exibir um Icon dentro dos itens.

Você também pode usar o slot #leading para exibir o ícone selecionado.

Com avatar nos itens

Você pode usar a propriedade avatar para exibir um Avatar dentro dos itens.

Você também pode usar o slot #leading para exibir o avatar selecionado.

Com chip nos itens

Você pode usar a propriedade chip para exibir um Chip dentro dos itens.

Neste exemplo, o slot #leading é usado para exibir o chip selecionado.

Controlar o estado de abertura

Você pode controlar o estado de abertura usando a prop default-open ou a diretiva v-model:open.

Neste exemplo, aproveitando o defineShortcuts, você pode abrir e fechar o InputMenu pressionando O.

Controlar o estado de abertura no foco

Você pode usar as props open-on-focus ou open-on-click para abrir o menu quando o input é focado ou clicado.

Controlar o termo de busca

Use a diretiva v-model:search-term para controlar o termo de busca.

Com ícone rotativo

Aqui está um exemplo com um ícone rotativo que indica o estado de abertura do InputMenu.

Com criação de item

Use a prop create-item para permitir que os usuários adicionem valores personalizados que não estão nas opções predefinidas.

A opção de criar aparece quando nenhuma correspondência é encontrada, por padrão. Defina como always para exibi-la mesmo quando houver valores semelhantes.

Use o evento @create para tratar a criação do item. Você receberá o evento e o item como argumentos.

Com itens buscados

Você pode buscar itens de uma API e usá-los no InputMenu.

Este exemplo usa useLazyFetch com immediate: false para buscar os dados apenas quando o menu abre, evitando chamadas de API desnecessárias no carregamento da página.

Com filtro ignorado

Defina a prop ignore-filter como true para desabilitar a busca interna e usar sua própria lógica de busca.

Este exemplo usa refDebounced para aplicar debounce nas chamadas de API. A busca é adiada com immediate: false, então nenhuma requisição é feita até o menu abrir.

Com campos de filtro

Use a prop filter-fields com um array de campos para filtrar. O padrão é [labelKey].

Este exemplo usa useLazyFetch com immediate: false para buscar os dados apenas quando o menu abre, evitando chamadas de API desnecessárias no carregamento da página.

Com virtualização 4.1+

Use a prop virtualize para habilitar a virtualização em listas grandes, como um booleano ou um objeto com opções como { estimateSize: 32, overscan: 12 }.

Quando habilitado, todos os grupos são achatados em uma única lista devido a uma limitação do Reka UI.

Com rolagem infinita 4.4+

Você pode usar o composable useInfiniteScroll para carregar mais dados conforme o usuário rola.

Este exemplo usa useLazyFetch com immediate: false, então os dados só são carregados conforme o usuário rola.

Com largura total do conteúdo

Você pode expandir o conteúdo até a largura total dos seus itens adicionando a classe min-w-fit no slot ui.content.

Você também pode alterar a largura do conteúdo globalmente no seu app.config.ts:

export default defineAppConfig({
  ui: {
    inputMenu: {
      slots: {
        content: 'min-w-fit'
      }
    }
  }
})

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`id`		`string`
`type`	`'text'`	`"number" \| "search" \| "color" \| "button" \| "checkbox" \| "date" \| "datetime-local" \| "email" \| "file" \| "hidden" \| "image" \| "month" \| "password" \| "radio" \| "range" \| "reset" \| "submit" \| "tel" \| "text" \| "time" \| "url" \| "week" \| string & {}`
`placeholder`		`string` The placeholder text when the input is empty.
`color`	`'primary'`	`"primary" \| "secondary" \| "accent" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`variant`	`'outline'`	`"soft" \| "outline" \| "subtle" \| "ghost" \| "none"`
`size`	`'md'`	`"sm" \| "md" \| "xs" \| "lg" \| "xl"`
`required`		`boolean`
`autofocus`		`boolean`
`autofocusDelay`	`0`	`number`
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`any` The icon displayed to open the menu.
`selectedIcon`	`appConfig.ui.icons.check`	`any` The icon displayed when an item is selected.
`deleteIcon`	`appConfig.ui.icons.close`	`any` The icon displayed to delete a tag. Works only when `multiple` is `true`.
`clear`	`false`	`C & false \| C & true \| C & Partial<Omit<ButtonProps, LinkPropsKeys>>` Display a clear button to reset the model value. Can be an object to pass additional props to the Button.
`clearIcon`	`appConfig.ui.icons.close`	`any` The icon displayed in the clear button.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`ComboboxContentProps & Partial<EmitsToProps<DismissableLayerEmits>>` The content of the menu.
`arrow`	`false`	`boolean \| ComboboxArrowProps` Display an arrow alongside the menu. `{ rounded: true }`
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the menu in a portal.
`virtualize`	`false`	`boolean \| { overscan?: number ; estimateSize?: number \| ((index: number) => number) \| undefined; } \| undefined` Enable virtualization for large lists. Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
`valueKey`	`undefined`	`VK` When `items` is an array of objects, select the field to use as the value instead of the object itself.
`labelKey`	`'label'`	`keyof Extract<NestedItem<T>, object> & string \| DotPathKeys<Extract<NestedItem<T>, object>>` When `items` is an array of objects, select the field to use as the label.
`descriptionKey`	`'description'`	`keyof Extract<NestedItem<T>, object> & string \| DotPathKeys<Extract<NestedItem<T>, object>>` When `items` is an array of objects, select the field to use as the description.
`items`		`T`
`defaultValue`		`_Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> \| IsClearUsed<M, C>` The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu.
`modelValue`		`_Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> \| IsClearUsed<M, C>` The controlled value of the InputMenu. Can be binded-with with `v-model`.
`modelModifiers`		`Mod`
`multiple`		`M` Whether multiple options can be selected or not.
`highlight`		`boolean` Highlight the ring color like a focus state.
`fixed`		`boolean` Keep the mobile text size on all breakpoints.
`mode`	`'combobox'`	`"autocomplete" \| "combobox"` The behavior of the InputMenu. `combobox`: select one (or many) items from a list of suggestions. `autocomplete`: free-form text input with optional suggestions. The `modelValue` becomes the input text (`string`) instead of a selected item.
`createItem`	`false`	`boolean \| "always" \| { position?: "bottom" \| "top" ; when?: "empty" \| "always" \| undefined; } \| undefined` Determines if custom user input that does not exist in options can be added.
`filterFields`	`[labelKey]`	`string[]` Fields to filter items by.
`ignoreFilter`	`false`	`boolean` When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`open`		`boolean` The controlled open state of the Combobox. Can be binded 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 field. Submitted with its owning form as part of a name/value pair.
`resetSearchTermOnBlur`	`true`	`boolean` Whether to reset the searchTerm when the Combobox input blurred
`resetSearchTermOnSelect`	`true`	`boolean` Whether to reset the searchTerm when the Combobox value is selected
`resetModelValueOnClear`	`true`	`boolean` When `true` the `modelValue` will be reset to `null` (or `[]` if `multiple`)
`highlightOnHover`		`boolean` When `true`, hover over item will trigger highlight
`openOnClick`	`false`	`boolean` Whether to open the combobox when the input is clicked
`openOnFocus`	`false`	`boolean` Whether to open the combobox when the input is focused
`by`		`string \| (a: T, b: T): boolean` Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.
`icon`		`any` 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`		`any` 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`	`any` The icon when the `loading` prop is `true`.
`list`		`string`
`readonly`		`false \| true \| "true" \| "false"`
`autocomplete`		`string & {} \| "on" \| "off"`
`searchTerm`	`''`	`string`
`ui`		{ root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; trailingClear?: SlotClass; arrow?: SlotClass; content?: SlotClass; viewport?: SlotClass; group?: SlotClass; empty?: SlotClass; label?: SlotClass; separator?: SlotClass; item?: SlotClass; itemLeadingIcon?: SlotClass; itemLeadingAvatar?: SlotClass; itemLeadingAvatarSize?: SlotClass; itemLeadingChip?: SlotClass; itemLeadingChipSize?: SlotClass; itemTrailing?: SlotClass; itemTrailingIcon?: SlotClass; itemWrapper?: SlotClass; itemLabel?: SlotClass; itemDescription?: SlotClass; tagsItem?: SlotClass; tagsItemText?: SlotClass; tagsItemDelete?: SlotClass; tagsItemDeleteIcon?: SlotClass; tagsInput?: SlotClass; }

Este componente também suporta todos os atributos HTML nativos de <input>.

Slots

Slot	Type
`leading`	`{ modelValue: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> \| IsClearUsed<M, C>; open: boolean; ui: object; }`
`trailing`	`{ modelValue: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> \| IsClearUsed<M, C>; open: boolean; ui: object; }`
`empty`	`{ searchTerm: string; }`
`item`	`{ item: NestedItem<T>; index: number; ui: object; }`
`item-leading`	`{ item: NestedItem<T>; index: number; ui: object; }`
`item-label`	`{ item: NestedItem<T>; index: number; }`
`item-description`	`{ item: NestedItem<T>; index: number; }`
`item-trailing`	`{ item: NestedItem<T>; index: number; ui: object; }`
`tags-item-text`	`{ item: NestedItem<T>; index: number; }`
`tags-item-delete`	`{ item: NestedItem<T>; index: number; ui: object; }`
`content-top`	`{}`
`content-bottom`	`{}`
`create-item-label`	`{ item: string; }`

Emits

Event	Type
`update:open`	`[value: boolean]`
`change`	`[event: Event]`
`blur`	`[event: FocusEvent]`
`focus`	`[event: FocusEvent]`
`create`	`[item: string]`
`clear`	`[]`
`highlight`	`[payload: { ref: HTMLElement; value: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> \| IsClearUsed<M, C>; } \| undefined]`
`remove-tag`	`[item: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> \| IsClearUsed<M, C>]`
`update:modelValue`	`[value: _Number<_Optional<_Nullable<GetModelValue<T, VK, M, ExcludeItem>, Mod>, Mod>, Mod> \| IsClearUsed<M, C>]`
`update:searchTerm`	`[value: string]`

Expose

Ao acessar o componente por meio de um template ref, você pode usar o seguinte:

Name	Type
`inputRef`	`Ref<HTMLInputElement \| null>`
`viewportRef`	`Ref<HTMLDivElement \| null>`

Tema

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-dimmed',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none',
        trailingIcon: 'shrink-0 text-dimmed',
        trailingClear: 'p-0',
        arrow: 'fill-bg stroke-default',
        content: 'max-h-[min(15rem,var(--reka-combobox-content-available-height,15rem))] w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col',
        viewport: 'relative scroll-py-1 overflow-y-auto flex-1',
        group: 'p-1 isolate',
        empty: 'text-center text-muted',
        label: 'font-semibold text-highlighted',
        separator: '-mx-1 my-1 h-px bg-border',
        item: [
          'group relative w-full flex items-start 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-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50',
          'transition-colors before:transition-colors'
        ],
        itemLeadingIcon: [
          'shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default',
          'transition-colors'
        ],
        itemLeadingAvatar: 'shrink-0',
        itemLeadingAvatarSize: '',
        itemLeadingChip: 'shrink-0',
        itemLeadingChipSize: '',
        itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
        itemTrailingIcon: 'shrink-0',
        itemWrapper: 'flex-1 flex flex-col min-w-0',
        itemLabel: 'truncate',
        itemDescription: 'truncate text-muted',
        tagsItem: 'px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75',
        tagsItemText: 'truncate',
        tagsItemDelete: [
          'inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none',
          'transition-colors'
        ],
        tagsItemDeleteIcon: 'shrink-0',
        tagsInput: 'flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group has-focus-visible:z-[1]',
            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 has-focus-visible:z-[1]',
            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-sm/4 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',
            empty: 'p-2 text-xs'
          },
          sm: {
            base: 'px-2.5 py-1.5 text-sm/4 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',
            empty: 'p-2.5 text-xs'
          },
          md: {
            base: 'px-2.5 py-1.5 text-base/5 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',
            empty: 'p-2.5 text-sm'
          },
          lg: {
            base: 'px-3 py-2 text-base/5 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',
            empty: 'p-3 text-sm'
          },
          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',
            empty: 'p-3 text-base'
          }
        },
        variant: {
          outline: 'text-highlighted bg-default ring ring-inset ring-accented',
          soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
          subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
          ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
          none: 'text-highlighted bg-transparent focus:outline-none'
        },
        color: {
          primary: '',
          secondary: '',
          accent: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: ''
        },
        fixed: {
          false: ''
        },
        type: {
          file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
        },
        virtualize: {
          true: {
            viewport: 'p-1 isolate'
          },
          false: {
            viewport: 'divide-y divide-default'
          }
        },
        multiple: {
          true: {
            root: 'flex-wrap'
          },
          false: {
            base: 'w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75'
          }
        }
      },
      compoundVariants: [
        {
          variant: 'soft',
          multiple: true,
          class: 'has-focus:bg-elevated has-focus-visible:outline-3'
        },
        {
          variant: 'ghost',
          multiple: true,
          class: 'has-focus:bg-elevated has-focus-visible:outline-3'
        },
        {
          color: 'primary',
          multiple: true,
          variant: [
            'outline',
            'subtle'
          ],
          class: 'has-focus-visible:outline-3 has-focus-visible:ring-primary'
        },
        {
          color: 'neutral',
          multiple: true,
          variant: [
            'outline',
            'subtle'
          ],
          class: 'has-focus-visible:outline-3 has-focus-visible:ring-inverted'
        },
        {
          color: 'primary',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary'
        },
        {
          color: 'primary',
          variant: [
            'soft',
            'ghost'
          ],
          class: 'outline-primary/25 focus-visible:outline-3'
        },
        {
          color: 'primary',
          highlight: true,
          class: 'ring ring-inset ring-primary'
        },
        {
          color: 'neutral',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted'
        },
        {
          color: 'neutral',
          variant: [
            'soft',
            'ghost'
          ],
          class: 'outline-inverted/25 focus-visible:outline-3'
        },
        {
          color: 'neutral',
          highlight: true,
          class: 'ring ring-inset ring-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'
          }
        },
        {
          fixed: false,
          size: 'xs',
          class: 'md:text-xs'
        },
        {
          fixed: false,
          size: 'sm',
          class: 'md:text-xs'
        },
        {
          fixed: false,
          size: 'md',
          class: 'md:text-sm'
        },
        {
          fixed: false,
          size: 'lg',
          class: 'md:text-sm'
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'accent',
        variant: 'outline'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      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-dimmed',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none',
            trailingIcon: 'shrink-0 text-dimmed',
            trailingClear: 'p-0',
            arrow: 'fill-bg stroke-default',
            content: 'max-h-[min(15rem,var(--reka-combobox-content-available-height,15rem))] w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col',
            viewport: 'relative scroll-py-1 overflow-y-auto flex-1',
            group: 'p-1 isolate',
            empty: 'text-center text-muted',
            label: 'font-semibold text-highlighted',
            separator: '-mx-1 my-1 h-px bg-border',
            item: [
              'group relative w-full flex items-start 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-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50',
              'transition-colors before:transition-colors'
            ],
            itemLeadingIcon: [
              'shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default',
              'transition-colors'
            ],
            itemLeadingAvatar: 'shrink-0',
            itemLeadingAvatarSize: '',
            itemLeadingChip: 'shrink-0',
            itemLeadingChipSize: '',
            itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
            itemTrailingIcon: 'shrink-0',
            itemWrapper: 'flex-1 flex flex-col min-w-0',
            itemLabel: 'truncate',
            itemDescription: 'truncate text-muted',
            tagsItem: 'px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75',
            tagsItemText: 'truncate',
            tagsItemDelete: [
              'inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none',
              'transition-colors'
            ],
            tagsItemDeleteIcon: 'shrink-0',
            tagsInput: 'flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
          },
          variants: {
            fieldGroup: {
              horizontal: {
                root: 'group has-focus-visible:z-[1]',
                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 has-focus-visible:z-[1]',
                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-sm/4 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',
                empty: 'p-2 text-xs'
              },
              sm: {
                base: 'px-2.5 py-1.5 text-sm/4 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',
                empty: 'p-2.5 text-xs'
              },
              md: {
                base: 'px-2.5 py-1.5 text-base/5 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',
                empty: 'p-2.5 text-sm'
              },
              lg: {
                base: 'px-3 py-2 text-base/5 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',
                empty: 'p-3 text-sm'
              },
              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',
                empty: 'p-3 text-base'
              }
            },
            variant: {
              outline: 'text-highlighted bg-default ring ring-inset ring-accented',
              soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
              subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
              ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
              none: 'text-highlighted bg-transparent focus:outline-none'
            },
            color: {
              primary: '',
              secondary: '',
              accent: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            leading: {
              true: ''
            },
            trailing: {
              true: ''
            },
            loading: {
              true: ''
            },
            highlight: {
              true: ''
            },
            fixed: {
              false: ''
            },
            type: {
              file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
            },
            virtualize: {
              true: {
                viewport: 'p-1 isolate'
              },
              false: {
                viewport: 'divide-y divide-default'
              }
            },
            multiple: {
              true: {
                root: 'flex-wrap'
              },
              false: {
                base: 'w-full border-0 placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75'
              }
            }
          },
          compoundVariants: [
            {
              variant: 'soft',
              multiple: true,
              class: 'has-focus:bg-elevated has-focus-visible:outline-3'
            },
            {
              variant: 'ghost',
              multiple: true,
              class: 'has-focus:bg-elevated has-focus-visible:outline-3'
            },
            {
              color: 'primary',
              multiple: true,
              variant: [
                'outline',
                'subtle'
              ],
              class: 'has-focus-visible:outline-3 has-focus-visible:ring-primary'
            },
            {
              color: 'neutral',
              multiple: true,
              variant: [
                'outline',
                'subtle'
              ],
              class: 'has-focus-visible:outline-3 has-focus-visible:ring-inverted'
            },
            {
              color: 'primary',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary'
            },
            {
              color: 'primary',
              variant: [
                'soft',
                'ghost'
              ],
              class: 'outline-primary/25 focus-visible:outline-3'
            },
            {
              color: 'primary',
              highlight: true,
              class: 'ring ring-inset ring-primary'
            },
            {
              color: 'neutral',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted'
            },
            {
              color: 'neutral',
              variant: [
                'soft',
                'ghost'
              ],
              class: 'outline-inverted/25 focus-visible:outline-3'
            },
            {
              color: 'neutral',
              highlight: true,
              class: 'ring ring-inset ring-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'
              }
            },
            {
              fixed: false,
              size: 'xs',
              class: 'md:text-xs'
            },
            {
              fixed: false,
              size: 'sm',
              class: 'md:text-xs'
            },
            {
              fixed: false,
              size: 'md',
              class: 'md:text-sm'
            },
            {
              fixed: false,
              size: 'lg',
              class: 'md:text-sm'
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'accent',
            variant: 'outline'
          }
        }
      }
    })
  ]
})

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

Changelog

No recent changes

InputDate

Um componente de input para seleção de data.

InputNumber

Um input para valores numéricos com intervalo personalizável.