GET STARTED

Import

Import the canonical standalone component from its granular entry point.

import { NeuralSwitch } from '@neural-ng/core/switch';

@Component({ imports: [NeuralSwitch] })

Binary state

Bind the boolean checked model directly. The projected text labels the native switch and remains clickable.

On and off labels

Optional track labels reinforce state visually. They are decorative, so ariaLabel supplies the accessible name when no visible label is projected.

Every Angular Forms API

Signal Forms, Reactive Forms and template-driven forms share one boolean source of truth.

States and Field composition

Disabled leaves the tab order, readonly remains discoverable without hover feedback, and NeuralField supplies shared validation state.

Semantic events

stateChange fires only for user interaction and includes both values. Programmatic writes only update checkedChange.

Logical RTL behavior

The thumb travels toward logical end, so the same component mirrors without separate application code.

Unstyled and typed slots

Native behavior and structural state hooks remain while Tailwind owns every visible choice.

Component boundary

Switch intentionally models only boolean state. Use Checkbox for form choices and TriState Checkbox when null or mixed is part of the domain.

Native foundation

The visually hidden input remains the interactive element. checked, disabled, required, name and inputValue map directly to native properties.

Accessible name

Project a concise visible label whenever possible. For icon-only or label-free composition, provide ariaLabel. onLabel and offLabel never replace the accessible name.

Keyboard

Tab focuses the switch and Space toggles it through native browser behavior. No custom key manager is required.

Readonly and disabled

Disabled removes interaction and focus. Readonly uses aria-readonly, stays focusable and restores the previous value when pointer or keyboard activation is attempted.

Field state

Inside NeuralField, the switch inherits its deterministic id, described-by chain, required, invalid, pending, disabled, readonly, fluid and unstyled state.

SSR and hydration

Stable APP_ID-based ids avoid random server markup. Rendering does not touch browser globals and interaction begins after hydration.

Models and inputs

Outputs

Methods

Typed class slots

Public types

Legacy alias

SwitchComponent remains importable for compatibility, but new code and generated AI context should always use NeuralSwitch.

Layout and typography

Track

Thumb and state

Motion