Radio

<tng-radio> is the component-layer radio for grouped single-choice flows. It keeps the visual shell ready to ship, forwards the native radio semantics through Angular inputs and outputs, and lets you restyle the control by overriding semantic tokens on the host.

If you need total DOM ownership or direct styling against the native input state hooks, move down to Headless > Form > Radio or use the ownable install.

import { TngRadioComponent } from '@tailng-ui/components';

Usage patterns

Start with projected label content and bind to checkedChange when the parent owns the selected value.

<tng-radio
  name="billing-plan"
  value="pro"
  [checked]="selectedPlan() === 'pro'"
  (checkedChange)="onPlanChange('pro', $event)"
>
  Pro plan
</tng-radio>

For real groups, render multiple radios with the same name and update the selected value only when a newly checked radio emits.

<section class="doc-cmp-radio-group">
  <tng-radio
    name="billing-plan"
    value="starter"
    [checked]="selectedPlan() === 'starter'"
    (checkedChange)="onPlanChange('starter', $event)"
  >
    Starter
  </tng-radio>
  <tng-radio
    name="billing-plan"
    value="pro"
    [checked]="selectedPlan() === 'pro'"
    (checkedChange)="onPlanChange('pro', $event)"
  >
    Pro
  </tng-radio>
</section>

Accessibility baseline

• Projected content becomes the visible label and accessible name.
• Mutual exclusion still depends on a shared name across the group.
• Keyboard arrow navigation comes from the native radio behavior underneath.
• For custom indicator markup or direct access to data-state hooks on the native input, use the headless or ownable surfaces instead of relying on internal DOM.