Combobox theming

The values listed below are exposed as --rozie-combobox-* custom properties, each with a built-in fallback, so Combobox works with zero configuration and re-skins by remapping tokens. The structural rules compile per-leaf and are not consumer-overridable.

:root {
  --rozie-combobox-width: 16rem;
  --rozie-combobox-accent: #0066cc;
  --rozie-combobox-input-padding: 0.5rem 0.75rem;
  --rozie-combobox-focus-ring-width: 3px;
}

Tokens

layout / typography

Token	Default
--rozie-combobox-width	16rem
--rozie-combobox-font	inherit

accent — the single color most consumers will set; focus ring + selected option derive from it

Token	Default
--rozie-combobox-accent	#0066cc

input box model

Token	Default
--rozie-combobox-input-padding	0.5rem 0.75rem
--rozie-combobox-color	inherit
--rozie-combobox-bg	#fff
--rozie-combobox-border-width	1px
--rozie-combobox-border-color	rgba(0, 0, 0, 0.25)
--rozie-combobox-radius	0.5rem

focus ring

Token	Default
--rozie-combobox-focus-ring-width	3px
--rozie-combobox-focus-ring-color	rgba(0, 102, 204, 0.25)

disabled

Token	Default
--rozie-combobox-disabled-opacity	0.55
--rozie-combobox-disabled-bg	rgba(0, 0, 0, 0.04)

popup listbox

Token	Default
--rozie-combobox-list-gap	0.25rem
--rozie-combobox-list-padding	0.25rem
--rozie-combobox-list-max-height	16rem
--rozie-combobox-list-bg	#fff
--rozie-combobox-list-border-color	rgba(0, 0, 0, 0.15)
--rozie-combobox-list-shadow	0 10px 24px rgba(0, 0, 0, 0.16)

option

Token	Default
--rozie-combobox-option-padding	0.4rem 0.6rem
--rozie-combobox-option-radius	0.375rem
--rozie-combobox-option-active-bg	rgba(0, 102, 204, 0.12)
--rozie-combobox-option-selected-weight	600
--rozie-combobox-option-disabled-opacity	0.45
--rozie-combobox-option-color	inherit

group heading — the label rendered above a <optgroup>-style block of options when the options array is grouped

Token	Default
--rozie-combobox-group-heading-color	rgba(0, 0, 0, 0.5)
--rozie-combobox-group-heading-letter-spacing	0.03em
--rozie-combobox-group-heading-margin-top	0
--rozie-combobox-group-heading-padding	0.35rem 0.6rem 0.15rem
--rozie-combobox-group-heading-size	0.75rem
--rozie-combobox-group-heading-transform	uppercase
--rozie-combobox-group-heading-weight	600

empty state — rendered when the filtered options list has zero entries

Token	Default
--rozie-combobox-empty-color	rgba(0, 0, 0, 0.5)
--rozie-combobox-empty-padding	0.5rem 0.6rem

overflow — the "+N more" affordance shown when the selection exceeds the visible chip count

Token	Default
--rozie-combobox-more-color	rgba(0, 0, 0, 0.55)
--rozie-combobox-more-size	0.875rem

creatable — the trailing "Create …" row shown when creatable is set and the typed query matches no option (see the Creatable section of the component docs). Reads as interactive; -color defaults through --rozie-combobox-accent (the same accent every selected/focused state already derives from) so it reads as an affordance, not a plain row; -bg is transparent by default, matching the "+N more" row's own chrome-free treatment.

Token	Default
--rozie-combobox-create-bg	transparent

chip rail — the selected-value chips rendered inside the control, before the input, when multiple is set. Mirrors @rozie-ui/tags' own chip theme: --rozie-combobox-chip-size sets the chip's font-size (Tags' equivalent of chip-font-size), and the single --rozie-combobox-chip-remove-size token drives BOTH the width and the height of the round remove button, same as Tags.

Token	Default
--rozie-combobox-chips-padding	0.35rem 0.45rem 0 0.45rem
--rozie-combobox-chip-gap	0.4rem
--rozie-combobox-chip-bg	rgba(0, 102, 204, 0.12)
--rozie-combobox-chip-color	inherit
--rozie-combobox-chip-radius	0.375rem
--rozie-combobox-chip-padding	0.15rem 0.5rem
--rozie-combobox-chip-size	0.85rem
--rozie-combobox-chip-remove-color	currentColor
--rozie-combobox-chip-remove-size	1.1rem

inline chip layout — chipLayout="inline" (with multiple) puts the chips and the input on one wrapping row inside a single bordered field. --rozie-combobox-inline-padding pads that field, --rozie-combobox-inline-input-min-width is the narrowest the input gets before it wraps onto the next row, and --rozie-combobox-inline-input-padding pads the (borderless) input.

Token	Default
--rozie-combobox-inline-padding	0.3rem 0.45rem
--rozie-combobox-inline-input-min-width	6rem
--rozie-combobox-inline-input-padding	0.2rem 0.25rem

state-dependent — declared initial on purpose. The component reads this token with a DIFFERENT local fallback at each read site (resting input falls back through --rozie-combobox-border-color, the :focus rule falls back through --rozie-combobox-focus-border-color), so declaring a single frozen value here would collapse the focus-state transition. initial resets the custom property to the guaranteed-invalid value, which makes every var() substitute its OWN local fallback — exactly today's render output, but now discoverable and overridable.

Token	Default
--rozie-combobox-input-underline	initial

Defaulted where Combobox reads them

Public, but declared nowhere by base.css: the fallback below applies only while no scope sets the token, and it is resolved at the component itself — so it follows a value set on any ancestor (a token it defaults to included).

Token	Default
--rozie-combobox-chip-remove-hover-color	var(--rozie-combobox-accent, #0066cc)
--rozie-combobox-create-color	var(--rozie-combobox-accent, #0066cc)
--rozie-combobox-focus-border-color	var(--rozie-combobox-accent, #0066cc)
--rozie-combobox-option-selected-color	var(--rozie-combobox-accent, #0066cc)

Design-system bridges

Each package ships token presets that map Combobox's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/combobox-react/themes/base.css';
import '@rozie-ui/combobox-react/themes/bootstrap.css';
import '@rozie-ui/combobox-react/themes/material.css';
import '@rozie-ui/combobox-react/themes/shadcn.css';

See also

• Combobox — showcase & API — the full prop / event / slot / handle reference.
• Combobox — usage examples — idiomatic per-framework consumption code.
• Combobox comparison — how it stacks up against the per-framework libraries.
• Combobox — live demo — the real package running in the page.