Styling contract
At the component layer, the supported styling surface is semantic-token overrides on the <tng-radio> host plus whatever shell your page owns around it.
| Contract | Apply on | Purpose |
|---|---|---|
--tng-semantic-accent-brand | <tng-radio> host | Checked accent color for the native radio control. |
--tng-semantic-accent-danger | <tng-radio> host | Invalid outline emphasis when [invalid] is present. |
--tng-semantic-focus-ring | <tng-radio> host | Focus-visible ring color around the native control. |
--tng-semantic-foreground-primary | <tng-radio> host | Projected label text color. |
| Wrapper shell classes | App-owned container | Cards, spacing, headings, helper text, and layout structure. |
If you need to style the native input directly with state selectors such as data-state or data-focus-visible, use the headless or ownable surfaces instead of depending on internal component markup.
User scenario style examples
Use the same radio component contract inside a plain CSS shell or a Tailwind shell by overriding host-level semantic tokens.