ColorModeSelect

A Select to switch between system, dark & light mode.

Usage

The ColorModeSelect component extends the SelectMenu component, so you can pass any property such as color, variant, size, etc.

<template>
  <UColorModeSelect />
</template>

Examples

With custom icons

Use the app.config.ts to customize the icon with the ui.icons property:

app.config.ts

export default defineAppConfig({
  ui: {
    icons: {
      system: 'i-ph-desktop',
      light: 'i-ph-sun',
      dark: 'i-ph-moon'
    }
  }
})

Use the vite.config.ts to customize the icon with the ui.icons property:

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        icons: {
          light: 'i-ph-sun',
          dark: 'i-ph-moon'
        }
      }
    })
  ]
})

API

Props

Prop	Default	Type
`defaultOpen`		`boolean` The open state of the combobox when it is initially rendered. Use when you do not need to control its open state.
`open`		`boolean` The controlled open state of the Combobox. Can be binded with with `v-model:open`.
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`string \| object` The icon displayed to open the menu.
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`highlight`		`boolean` Highlight the ring color like a focus state.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`content`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`ComboboxContentProps & Partial<EmitsToProps<DismissableLayerEmits>>` The content of the menu.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`avatar`		`AvatarProps` Display an avatar on the left side.
`variant`	`'outline'`	`"ghost" \| "outline" \| "soft" \| "subtle" \| "none"`
`autofocus`		`boolean`
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`leadingIcon`		`string \| object` Display an icon on the left side.
`loadingIcon`	`appConfig.ui.icons.loading`	`string \| object` The icon when the `loading` prop is `true`.
`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
`highlightOnHover`		`boolean` When `true`, hover over item will trigger highlight
`defaultValue`		null \| string \| number \| bigint \| false \| true \| { [key: string]: any; label?: string \| undefined; description?: string \| undefined; icon?: string \| object \| undefined; avatar?: AvatarProps \| undefined; chip?: ChipProps \| undefined; type?: "item" \| "label" \| "separator" \| undefined; disabled?: boolean \| undefined; onSelect?: ((e: Event) => void) \| undefined; class?: any; ui?: Pick<{ base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; value?: ClassNameValue; placeholder?: ClassNameValue; arrow?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; input?: ClassNameValue; focusScope?: ClassNameValue; }, "item" \| "label" \| "separator" \| "itemLeadingIcon" \| "itemLeadingAvatar" \| "itemLeadingAvatarSize" \| "itemLeadingChip" \| "itemLeadingChipSize" \| "itemTrailing" \| "itemTrailingIcon" \| "itemWrapper" \| "itemLabel" \| "itemDescription"> \| undefined; } The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu.
`multiple`		`false` Whether multiple options can be selected or not.
`required`		`boolean`
`id`		`string`
`placeholder`		`string` The placeholder text when the select is empty.
`searchInput`	`false`	`boolean \| InputProps<AcceptableValue>` Whether to display the search input or not. Can be an object to pass additional props to the input. `{ placeholder: 'Search...', variant: 'none' }`
`selectedIcon`	`appConfig.ui.icons.check`	`string \| object` The icon displayed when an item is selected.
`arrow`	`false`	`boolean \| ComboboxArrowProps` Display an arrow alongside the menu.
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the menu in a portal.
`virtualize`	`false`	`boolean \| { overscan?: number ; estimateSize?: 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`	`undefined` When `items` is an array of objects, select the field to use as the value instead of the object itself.
`labelKey`	`'label'`	`string \| number` When `items` is an array of objects, select the field to use as the label.
`descriptionKey`	`'description'`	`string \| number` When `items` is an array of objects, select the field to use as the description.
`createItem`	`false`	`boolean \| "always" \| { position?: "top" \| "bottom" ; 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.).
`autofocusDelay`		`number`
`ui`		{ base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; value?: ClassNameValue; placeholder?: ClassNameValue; arrow?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; separator?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; input?: ClassNameValue; focusScope?: ClassNameValue; }

Changelog

5b177 — feat: extend native HTML attributes (#5348)

5cb65 — feat: import @nuxt/ui-pro components

ColorModeImage

An image element with a different source for light and dark mode.

ColorModeSwitch

A switch to toggle between light and dark mode.