ColorModeSelect

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

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

{
  "wait": "Loading client-side content..."
}

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`	`icons.chevronDown`	`IconComponent` The icon displayed to open the menu.
`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" \| "xss"`
`avatar`		`AvatarProps` Display an avatar on the left side.
`color`	`'air-primary'`	`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-warning" \| "air-primary-copilot"`
`autofocus`		`boolean`
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`rounded`	`false`	`boolean` Rounds the corners of the select
`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`		color?: "air-primary-success" \| "air-primary-alert" \| "air-primary-warning" \| "air-primary-copilot" \| "null" \| "string" \| "number" \| "bigint" \| "false" \| "true" \| "{ [key: string]: any; label?: string ; description?: string" \| "undefined; icon?: IconComponent" \| "undefined; avatar?: AvatarProps" \| "undefined; air-primary" \| "undefined; chip?: ChipProps" \| "undefined; type?: item" \| "label" \| "separator" \| "undefined; disabled?: boolean" \| "undefined; onSelect?: ((e: Event) => void)" \| "undefined; class?: any; b24ui?: Pick<{ root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; value?: ClassNameValue; placeholder?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; arrow?: 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`	`false`	`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...', type: 'text', size: 'md' }`
`noPadding`	`false`	`boolean` Removes padding from input
`noBorder`	`false`	`boolean` Removes all borders (rings)
`underline`	`false`	`boolean` Removes all borders (rings) except the bottom one
`tag`		`string`
`tagColor`	`'air-primary'`	`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-warning" \| "air-primary-copilot" \| "air-secondary" \| "air-secondary-alert" \| "air-secondary-accent" \| "air-secondary-accent-1" \| "air-secondary-accent-2" \| "air-tertiary" \| "air-selection"`
`selectedIcon`	`icons.check`	`IconComponent` 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.
`highlight`		`boolean` Highlight the ring color like a focus state.
`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`
`b24ui`		{ root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; value?: ClassNameValue; placeholder?: ClassNameValue; content?: ClassNameValue; viewport?: ClassNameValue; arrow?: 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; }

ColorModeImage

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

ColorModeSwitch

A switch to toggle between light and dark mode.

ColorModeSelect

Usage

API

Props