Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

API reference

<tng-switch> is built on the tngSwitch primitive. Most component consumers will stay at the wrapper layer, but it helps to understand which primitive inputs are flowing through.

Underlying primitive: tngSwitch

The wrapper forwards checked, disabled, required, and ariaLabel to the internal switch button that owns the ARIA role and state attributes.

Primitive attachment

html
<button
  tngSwitch
  [checked]="releaseReady()"
  ariaLabel="Release ready"
  (click)="releaseReady.update(value => !value)"
>
  <span class="switch-thumb" aria-hidden="true"></span>
</button>
Forwarded primitive surfaceNotes
checkedControls the visual state and aria-checked value.
disabledBlocks interaction and reflects disabled styling hooks on the button.
requiredReflects aria-required for assistive technology.
ariaLabelAccessible name when the projected label needs different spoken copy.

If you need custom thumb markup or direct styling against the primitive button state, move to Headless > Form > Switch or the ownable surface.

tng-switch (styled component)

The wrapper renders the default track and thumb, syncs a hidden checkbox for native form submission, and exposes Angular-friendly checkedChange events for controlled usage.

Component attachment

html
<tng-switch
  [checked]="releaseReady()"
  (checkedChange)="releaseReady.set($event)"
>
  Release ready
</tng-switch>
InputTypeDefaultDetails
checkedbooleanfalseCommitted on/off state when the component is used in controlled mode.
disabledbooleanfalseDisables the visible switch button and the hidden checkbox.
requiredbooleanfalseMarks the hidden checkbox as required and forwards ARIA required state.
namestring | nullnullNative form field name for HTML form submission.
valuestring'on'Submitted value for the hidden checkbox when checked.
ariaLabelstring | nullnullAccessible name override for the internal switch button.
SurfaceTypeNotes
checkedChangeEventEmitter<boolean>Emits the next checked state after click or arrow-key interaction.
Projected label content<ng-content>Visible switch label shown next to the control.
Icon slots[onIcon], [offIcon]Optional projected icons rendered inside the thumb.
Keyboard behaviorArrowLeft, ArrowRight, clickArrowLeft forces off, ArrowRight forces on, and click handles the regular toggle.

Hidden input in native forms

html
<form>
  <tng-switch name="autoPublish" value="enabled" [checked]="true">
    Auto publish after review
  </tng-switch>
</form>

tng-switch is not a ControlValueAccessor. Bind it with checked and checkedChange, or drop to headless/ownable if you need a different forms integration strategy.