Forms

Select

Choose one option from a keyboard-accessible popover.

Blinc 0.6.0stable API

Select interaction recorded with the Blinc headless renderer

Hybrid · dark · native recording · 2×

Dark

Theme

Disabled

Recorded Select preview while the live runtime loads

custom.css

Enable JavaScript to use the live preview.

Rust · component usage

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

pub fn select_demo(choice: Signal<String>, disabled: Signal<bool>) -> Div {
    div()
        .class("demo-stack")
        .child(
            select(choice)
                .label("Language")
                .disabled(disabled)
                .option("rust", "Rust")
                .option("typescript", "TypeScript")
                .option("python", "Python"),
        )
        .child(
            bound_text(computed(move |graph| {
                format!("Selected: {}", graph.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-select-trigger,
  .cn-select-content,
  .cn-select-item {
    font-family: var(--font-sans);
  }

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

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

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

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

  .cn-select-trigger {
    color: var(--text-primary);
    background: transparent;
    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-select-trigger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  }

  .cn-select-trigger:active:not(:disabled) {
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  }

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

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

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

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

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

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

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

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

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

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

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

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

Usage and properties

The value Signal owns the selection. Popover content lives in the overlay root, outside .catalog-demo; target .cn-select-content and .cn-select-item directly when restyling.

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>`	Read/write binding	rust
`label`	`String`	Bound	Language
`disabled`	`bool`	Bound	false
`options`	`SelectOption`	Structural	Rust, TypeScript, Python
`on_change`	`Fn(&str)`	Callback	Optional user selection feedback

Keyboard and interaction

[data-state="open"], [data-placeholder], :hover, :disabled and :focus-visible. Enter/Space opens; arrows move; Enter selects; Escape dismisses.

Customizing it

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

.cn-select-trigger
.cn-select-content
.cn-select-item
.cn-select-item--selected
.cn-chevron

Theme and component variables: --surface-elevated, --surface-overlay, --border, --primary, --focus-ring, --text-primary, --text-secondary.

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.

Dropdown selection, bound to a Signal<String> holding the selected value:

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

cn::select(fruit)
    .label("Fruit")
    .option("apple", "Apple")
    .option("banana", "Banana")
    .option_disabled("durian", "Durian")
    .placeholder("Select a fruit...")
    .size(SelectSize::Medium)
    .w(240.0)
    .on_change(|value| println!("selected: {value}"))

.disabled(..) makes the whole select inert; it takes a bool, Signal or Computed.

The open list grows to 300px and then scrolls, and it opens with the chosen option in the middle. For a long list, .virtual_rows(row_height) builds only the rows in view, each row_height pixels tall, so hundreds of options open at once:

let year = ctx.use_signal("2026".to_string());

cn::select(year)
    .options((1900..=2100).map(|y| SelectOption::new(y.to_string(), y.to_string())))
    .virtual_rows(32.0)

Styling

The trigger is one element with the class cn-select-trigger. It has a disabled attribute while disabled, data-placeholder while nothing is chosen and data-state="open" while its list is showing, so its look is rules, eased by a transition: a faint tint on :hover, a stronger one on :active, a darker border while open, and the disabled palette. The shown text inherits the trigger's color, which the placeholder and disabled rules dim. Restyle it with rules of your own:

.cn-select-trigger[data-state="open"] { border-color: #16a34a; }

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 × 320 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.