docs

API reference

Radio keeps the native radio behavior at the primitive layer and exposes a styled wrapper for product teams that want a ready-to-ship shell.

Attach to input[tngRadio] and rely on native radio grouping through a shared name.

<label class="radio-row">
  <input tngRadio name="plan" value="starter" />
  <span>Starter</span>
</label>

Input	Type	Default	Notes
`checked`	`boolean \| '' \| string`	`false`	Checked state for controlled usage.
`disabled`	`boolean \| '' \| string`	`false`	Blocks user interaction.
`readonly`	`boolean \| '' \| string`	`false`	Keeps focusable semantics while preventing value change.
`required`	`boolean \| '' \| string`	`false`	Reflects native required attribute.
`invalid`, `ariaInvalid`	`boolean \| null \| '' \| 'true' \| 'false'`	`null`	Validation state hooks for ARIA and styling.
`name`, `value`	`string \| null`	`null`	Native group and form-submission semantics.
`ariaDescribedBy`	`string \| null`	`null`	Associates helper/error text.

<p id="plan-help">Choose one plan.</p>
<label class="radio-row">
  <input tngRadio ariaDescribedBy="plan-help" />
  <span>Starter</span>
</label>

Styled wrapper forwarding primitive behavior and emitting checkedChange only when interaction is allowed.

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

API	Type	Details
Inputs	`checked`, `disabled`, `readonly`, `required`, `invalid`, `ariaInvalid`, `name`, `value`, `ariaDescribedBy`	Forwarded to the primitive input and internal wrapper state.
Output	`checkedChange: boolean`	Emits the checked state of the radio that was interacted with.
Default value	`value = 'on'`	Override the value for meaningful form posts or controlled groups.
Projected content	Label text/content	The projected content becomes the visible label and accessible name.