Docs

Select (Advanced)

The Select (listbox) surface — the visual half of the Base-UI-backed Select, a fully-styled, keyboard-driven, optionally-multi listbox.

Real use · items-driven, with colors

Composable · grouped options

Sizes

Using Select (Advanced)

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so a component that needs interaction is styled but inert.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class select-group-label, with 9 modifiers:

  • .select-group-label
  • .select-icon
  • .select-item
  • .select-item-indicator
  • .select-placeholder
  • .select-popup
  • .select-scroll-arrow
  • .select-separator
  • .select-trigger
  • .select-value

The full API for Select (Advanced), on every path, is available through the Silica MCP server.