Level: atom.
Purpose and use
Represent one option in an exclusive choice. The enclosing composition must maintain the selected item; do not treat a collection of these standalone controls as a complete Radio Group API.
Anatomy and behavior
A native radio is wrapped by a label with optional description and decorative hint. User selection emits selectedChange; parent state drives selected. Disabled suppresses changes, and error sets aria-invalid. Description appears only with visible text.
Accessibility and content
Each control has native radio semantics and a generated ID. With hidden text, label remains the accessible name. The current API has no name or group input and no group keyboard controller: exclusive selection and arrow-key group navigation are not provided by this component.
Open Questions
A receiving composition needs a verified grouping and keyboard contract before presenting multiple instances as one accessible radio group.
Local component contract
This is the current owned contract for component.radio. Behavior above was checked
against the local implementation, template and focused tests listed below.
Historical migration evidence does not override these current sources.
Public type values
WblRadioSize: S | M. State flags are booleans; selectedChange emits a boolean.
Classes and selectors
WblRadioComponent—wbl-radio(src/app/design-system/primitives/radio/radio.component.ts).
Inputs
WblRadioComponent.size = input<WblRadioSize>('M')WblRadioComponent.selected = input(false)WblRadioComponent.disabled = input(false)WblRadioComponent.error = input(false)WblRadioComponent.text = input(true)WblRadioComponent.label = input('Label')WblRadioComponent.description = input(false)WblRadioComponent.descriptionText = input('Desc')WblRadioComponent.hint = input(false)
Models
- None.
Outputs
WblRadioComponent.selectedChange = output<boolean>()
Slots and projection markers
- The exact template has no Angular content-projection slot.
Local evidence
Behavior/template:
src/app/design-system/primitives/radio/radio.component.html(reviewed in D-025, 2026-09-05).Code:
src/app/design-system/primitives/radio/radio.component.ts.Focused test:
src/app/design-system/primitives/radio/radio.component.spec.ts.Public export:
export * from './primitives/radio/radio.component';insrc/app/design-system/index.ts.Storybook:
storybook/stories/radio.stories.ts(Design System/Primitives/wbl-radio).
Figma status
This runtime contract does not infer a Figma owner. Assembly evidence, when verified, is maintained separately through the inventory-linked sidecar.
Provenance
The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.