Forms

Radio Group

Choose one option from a labelled group.

Blinc 0.6.0stable API

Radio Group interaction recorded with the Blinc headless renderer

Hybrid · dark · native recording · 2×

Dark

Theme

Disabled

Recorded Radio Group 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 radio_demo(choice: Signal<String>, disabled: Signal<bool>) -> Div {
    div()
        .class("demo-stack")
        .child(
            cn::radio_group(choice)
                .label("Language")
                .option("typescript", "TypeScript")
                .option("rust", "Rust")
                .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 {
  .blinc-radio {
    background: transparent;
    border-color: var(--border-secondary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition:
      border-color var(--duration-fast) var(--ease-state),
      transform var(--duration-fastest) var(--ease-state);
  }

  .blinc-radio:hover:not(:disabled) {
    border-color: var(--primary);
    transform: scale(1.05, 1.05);
  }

  .blinc-radio:checked {
    border-color: var(--primary);
  }

  .blinc-radio:disabled {
    background: var(--input-bg-disabled);
    border-color: var(--border-secondary);
    opacity: 0.5;
    cursor: not-allowed;
  }

  .blinc-radio-dot {
    background: var(--primary);
    border-radius: var(--radius-full);
    opacity: 0;
    transition:
      opacity var(--duration-fast) var(--ease-state),
      transform var(--duration-fastest) var(--ease-state);
  }

  .blinc-radio:checked > .blinc-radio-dot {
    opacity: 1;
  }

  .blinc-radio-label {
    color: var(--text-primary);
  }

  .blinc-radio-row:disabled > .blinc-radio-label {
    color: var(--text-tertiary);
  }

  .blinc-radio-group-label {
    color: var(--text-secondary);
  }

  .blinc-radio-group:disabled > .blinc-radio-group-label {
    color: var(--text-tertiary);
  }

  .blinc-radio:active:not(:disabled) .blinc-radio-dot {
    transform: scale(0.8, 0.8);
  }

  .cn-radio {
    font-family: var(--font-sans);
  }

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

  .cn-radio {
    border-color: var(--cn-radio-border, var(--border-secondary));
  }

  .cn-radio:hover:not(:disabled) {
    border-color: var(--cn-radio-hover-border, var(--primary));
  }

  .cn-radio:checked {
    border-color: var(--cn-radio-selected, var(--primary)) !important;
  }

  .cn-radio:checked:disabled {
    border-color: var(--border-secondary) !important;
  }

  .cn-radio:checked > .cn-radio-dot {
    background: var(--cn-radio-dot, var(--primary)) !important;
  }

  .cn-radio-dot {
    background: var(--cn-radio-dot, var(--primary));
  }
}

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

Usage and properties

Choose one option from a labelled group. 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	values.choice
`option(value, label)`	`strings`	Construction	TypeScript / Rust / Python
`disabled`	`bool or IntoReactive<bool>`	Bound	values.disabled

Keyboard and interaction

Tab reaches each radio; Enter or Space selects it. :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-radio
.cn-radio-dot

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.

A group reads and writes a Signal<String> holding the selected value:

let size = ctx.use_signal("md".to_string());

radio_group(size)
    .label("Size")
    .option("sm", "Small")
    .option("md", "Medium")
    .option("lg", "Large")
    .on_change(|value| println!("size: {value}"))

radio_group(size).horizontal()
radio_group(size).size(RadioSize::Large)
radio_group(size).option_disabled("lg", "Large")   // one option
radio_group(size).disabled(locked)                  // all of them; a bool, Signal or Computed

Styling

Each ring has a checked attribute while its option is selected and disabled while it cannot be chosen. The ring's border, the dot's fade-in, hover (which also highlights an unselected option) and the disabled fill are the .cn-radio and .cn-radio-dot rules of CN_STYLES:

@layer components {
    .my-radio:checked {
        border-color: #16a34a !important;
    }
    .my-radio:checked > .cn-radio-dot {
        background: #16a34a !important;
    }
}

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.