Radio

The ownable Radio install gives your app a local wrapper, editable styles, and a nearby source surface for grouped single-choice workflows while keeping the TailNG interaction contract intact.

Why own Radio locally

Radio groups often become product-specific once teams add card layouts, helper copy, grouped descriptions, or custom visual emphasis for risky choices. Local ownership makes those adaptations easy to ship without waiting on a package release.

Adjust card layout, group descriptions, and supporting content for your flow.
Keep business-specific selection visuals and copy next to the feature code.
Iterate on grouped radio UX without forking the shared package surface.

What the install includes

The registry-backed radio install writes the local wrapper component, template, styles, and export barrel under your app so the generated files can evolve with the surrounding form UX.

Ownable Install

Install Radio from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add radio

npx tailng add radio

Generated files

The command scaffolds local files under src/app/tailng-ui/radio.

src/app/tailng-ui/radio/tng-radio-primitive.ts
src/app/tailng-ui/radio/tng-radio.ts
src/app/tailng-ui/radio/tng-radio.html
src/app/tailng-ui/radio/tng-radio.css
src/app/tailng-ui/radio/index.ts

Import in your feature module/component

import { TngRadio, TngRadioPrimitive } from './tailng-ui/radio';

Usage

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