Select theming

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

:root {
  --rozie-select-width: 16rem;
  --rozie-select-accent: #0066cc;
  --rozie-select-color: inherit;
  --rozie-select-placeholder: #757575;
}

Tokens

layout / typography

Token	Default
--rozie-select-width	16rem
--rozie-select-font	inherit
--rozie-select-gap	0.5rem
--rozie-select-control-padding	0.5rem 0.75rem

accent: the single color most consumers will set; the focus border and the selected option's check mark follow it

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

control box model

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

the placeholder text colour; the default is the browser's own ::placeholder grey, which is what Combobox's input renders

Token	Default
--rozie-select-placeholder	#757575

focus ring: while focus is anywhere inside the control it gets a focus-border-color border (defaults to the accent) and a box-shadow ring, as Combobox's input does

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

disabled

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

trailing arrow and clear button

Token	Default
--rozie-select-arrow-color	currentColor
--rozie-select-arrow-opacity	0.7
--rozie-select-clear-color	currentColor
--rozie-select-clear-size	1rem

popup listbox. list-gap is the in-flow gap between the control and the list of an inline select only; a floating popup's distance from the control is the offset prop. z is the stacking order of the floating popup: Select forwards it to the composed popover as --rozie-popover-z, so the popup panel follows it.

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

option

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

group heading: the label rendered above a block of options when the options are grouped

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

empty state: rendered when the (filtered) options list has zero entries

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

chips: the selected-value chips rendered inside the control when multiple is set. chip-gap is the gap between chips on a row and between rows once they wrap (it also spaces the trigger and the buttons while chips are shown); chip-size sets the chip's font-size, and the single chip-remove-size drives BOTH the width and the height of the round remove button.

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

Defaulted where Select 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-select-check-color	var(--rozie-select-accent, #0066cc)
--rozie-select-focus-border-color	var(--rozie-select-accent, #0066cc)
--rozie-select-popup-radius	var(--rozie-select-radius, 0.5rem)

Design-system bridges

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

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

See also

• Select — showcase & API — the full prop / event / slot / handle reference.
• Select — usage examples — idiomatic per-framework consumption code.
• Select comparison — how it stacks up against the per-framework libraries.
• Select — live demo — the Vue leaf's workspace build running in the page (not yet the published npm package).