Switch

<tng-switch> is the component-layer toggle for simple on/off settings. It wraps the headless primitive, renders the default track and thumb, and keeps a hidden checkbox in sync for native form submission when you provide name and value.

import { TngSwitchComponent } from '@tailng-ui/components';

Usage patterns

Use the component in controlled mode with checked and checkedChange when the parent owns the setting state.

<tng-switch
  [checked]="releaseReady()"
  (checkedChange)="releaseReady.set($event)"
>
  Release ready
</tng-switch>

Add name and value when the hidden native checkbox should participate in plain HTML form submission.

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

Accessibility baseline

• The wrapper keeps the interactive element as a switch-role button, with a synced hidden checkbox for forms.
• Projected text becomes the visible label next to the switch.
• ArrowLeft forces off and ArrowRight forces on; click handles the regular toggle action.
• If you need direct access to primitive state hooks or custom thumb markup, move to the headless or ownable surfaces.