Forms

Combobox

Search a list and select an option.

Blinc 0.6.0stable API

Combobox interaction recorded with the Blinc headless renderer

Hybrid · dark · native recording · 2×

Dark

Theme

Disabled

Recorded Combobox preview while the live runtime loads

custom.css

Enable JavaScript to use the live preview.

Rust · component usage

use blinc_cn as cn;
use blinc_core::reactive::{Signal, computed};
use blinc_layout::{binding::IntoReactive, prelude::*};

pub fn combobox_demo(choice: Signal<String>, disabled: Signal<bool>) -> Div {
    div()
        .class("demo-stack")
        .child(
            cn::combobox(choice)
                .label("Framework language")
                .option("rust", "Rust")
                .option("typescript", "TypeScript")
                .option("python", "Python")
                .disabled(disabled),
        )
        .child(
            bound_text(computed(move |g| {
                format!("Selected: {}", g.get(choice).unwrap_or_default())
            }))
            .class("demo-caption"),
        )
}

fn bound_text(value: impl IntoReactive<String>) -> Text {
    Text::bound(value.into_reactive())
}

Default component CSS

@layer components {
  .cn-combobox-trigger,
  .cn-combobox-content,
  .cn-combobox-item {
    font-family: var(--font-sans);
  }

  .cn-combobox-trigger {
    letter-spacing: var(--tracking-tight);
  }

  .cn-combobox-trigger:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .cn-combobox-search {
    background: var(--surface);
    border-color: var(--border);
  }

  .cn-combobox-search:hover:not(:disabled),
  .cn-combobox-search:focus:not(:disabled) {
    background: var(--surface);
    border-color: var(--border-focus);
  }

  .cn-chevron {
    transition: transform var(--duration-normal) var(--ease-state);
  }

  .cn-combobox-trigger[data-state="open"] > .cn-chevron {
    transform: rotate(180deg);
  }

  .cn-combobox-box:disabled {
    opacity: 0.5;
  }

  @keyframes cn-dropdown-menu-enter {
    from {
      opacity: 0;
      transform: scale(0.96) translateY(-4px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .cn-combobox-trigger {
    color: var(--text-primary);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border-color: var(--border);
    border-radius: var(--radius-default);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-state),
      border-color var(--duration-fast) var(--ease-state);
  }

  .cn-combobox-trigger:hover:not(:disabled) {
    border-color: var(--border-hover);
  }

  .cn-combobox-trigger[data-state="open"]:not(:disabled),
  .cn-combobox-trigger[data-state="open"]:hover:not(:disabled) {
    border-color: var(--border-focus);
  }

  .cn-combobox-trigger[data-placeholder] {
    color: var(--text-tertiary);
  }

  .cn-combobox-trigger:disabled {
    color: var(--text-tertiary);
    box-shadow: none;
    background: var(--input-bg-disabled);
    border-color: var(--border-secondary);
    cursor: not-allowed;
  }

  .cn-combobox-content {
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-default);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    animation: cn-dropdown-menu-enter var(--duration-fast) var(--ease-state);
    transform-origin: top center;
  }

  .cn-combobox-item {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    color: var(--text-primary);
    font-size: var(--text-sm);
  }

  .cn-combobox-item:hover:not(:disabled) {
    background: var(--accent-subtle);
  }

  .cn-combobox-item--selected {
    background: var(--selection) !important;
    color: var(--accent) !important;
  }

  .cn-combobox-item--selected:disabled {
    color: var(--text-tertiary) !important;
    background: transparent !important;
  }

  .cn-combobox-item:disabled {
    color: var(--text-tertiary);
    background: transparent;
    cursor: not-allowed;
  }

  .cn-combobox-empty {
    color: var(--text-tertiary);
  }

  .cn-combobox-search-row {
    border-bottom: 1px solid var(--border);
  }

  .cn-combobox-trigger > .cn-chevron {
    color: var(--text-tertiary);
  }
}

JavaScript is needed for Live and tab controls. Read the Rust source or read the default component CSS.

Usage and properties

Search a list and select an option. Apply CSS after the component layer to restyle the documented parts.

Use the installation guide to add blinc_cn and its component stylesheet. Create the fixture bindings once, and return the demo from your UI builder. Values marked Bound accept Signal/Computed sources where the API supports them; structural options configure the component at construction.

Property	Type	Update model	This example
`value`	`Signal<String>`	Bound	rust
`option(value, label)`	`strings`	Construction	Rust / TypeScript / Python
`disabled`	`bool or IntoReactive<bool>`	Bound	values.disabled

Keyboard and interaction

Use the control’s documented keyboard commands; Tab reaches enabled controls and :focus-visible marks keyboard focus.

Customizing it

Add application CSS after the default component layer. These selectors are the restyling surface for this component:

.cn-combobox
.cn-combobox-trigger
.cn-chevron
.cn-combobox-box
.cn-combobox-content
.cn-combobox-search
.cn-combobox-search-row
.cn-combobox-empty
.cn-combobox-item
.cn-combobox-item--selected

Theme and component variables: --primary, --text-primary, --text-secondary, --surface, --border, --radius-default, --duration-fast, --ease-state.

Built-in themes

The Live theme control installs Blinc's own theme bundles, including their colours, focus rings, corner shapes and motion tokens.

pub fn theme_bundle_for(name: &str) -> blinc_theme::ThemeBundle {
    match name {
        "restrained" => blinc_theme::RestrainedTheme::bundle(),
        "expressive" => blinc_theme::ExpressiveTheme::bundle(),
        _ => blinc_theme::HybridTheme::bundle(),
    }
    .with_css(blinc_cn::cn_styles::CN_STYLES)
}

Download the default widget and component stylesheets. Sample assets and licenses are available in the asset guide.

Documentation

From the canonical component guide.

Searchable select, bound to a Signal<String> holding the selected value:

let framework = ctx.use_signal(String::new());

cn::combobox(framework)
    .option("react", "React")
    .option("vue", "Vue")
    .option_disabled("angular", "Angular")
    .placeholder("Select a framework...")
    .size(ComboboxSize::Medium)
    .w(240.0)
    .allow_custom(false)
    .on_change(|value| println!("selected: {value}"))

Typing in the list's search field filters the options.

Styling

The trigger is one element with the class cn-combobox-trigger. It has a disabled attribute while disabled and data-state="open" while its list is showing, so its border is rules, eased by a transition: darker on :hover, the focus border while open, and the disabled palette. The search field is a text input with the class cn-combobox-search. Restyle either with rules of your own.

Platforms and version

The component API is available in Blinc 0.6.0. The Live example runs in a dedicated worker and requires a compatible GPU surface. Preview and Code remain available when Live cannot start. The canvas has a descriptive label; a full screen-reader DOM mirror is not provided. The gallery integration is based on revision e2e55c24e078.

Recordings and live demos use the default Hybrid theme with bundled Noto Sans. The recording uses a 560 × 420 logical viewport at twice that resolution. Live follows its container and actual display density. Source base revision · Exact build source · Artifact versions and checksums · Font license.