Radio

Radio wraps a native <input type="radio"> inside an accessible <label>, meant to be used in groups of two or more sharing the same name for a single exclusive choice. There is no RadioGroup container — exclusivity comes from giving every radio the same name and deriving each one's checked from one shared signal.

Minimal example

import { Component, signal } from "@angular/core";
import { RadioComponent } from "@sinequa/galactik";

@Component({
  selector: "sample-component",
  imports: [RadioComponent],
  template: `
    <radio name="delivery" [checked]="delivery() === 'standard'" (checkedChange)="delivery.set('standard')">
      Standard delivery
    </radio>
    <radio name="delivery" [checked]="delivery() === 'express'" (checkedChange)="delivery.set('express')">
      Express delivery
    </radio>
  `,
})
export class SampleComponent {
  delivery = signal<"standard" | "express">("standard");
}

How it works

Each <radio> owns an independent checked model — grouping relies on two things working together: the native name attribute (native focus/keyboard roving, and the browser visually unchecking siblings), and deriving every radio's [checked] from one shared signal so the app's own state stays authoritative. As long as [checked] is a derived expression (selected() === 'x') rather than an independent local boolean per radio, a sibling recomputes to false automatically when another one is picked — the native (change) only fires on the newly-selected radio, never on the one that gets unchecked, and this is what makes that safe.

Options

Pitfalls

What's next