Switch

A control that allows the user to toggle between checked and not checked.

Default

A basic switch component with a label.

Reactive Form

Switch integrated within an Angular Reactive Form.

Values: { "marketing": true, "notifications": false }

Custom Colors

Applying custom Tailwind CSS classes to theme the switch's checked state.

API Reference

Brain API

The brain directives provide the functional logic and state management for the switch.

DirectiveSelectorInputs / Outputs
BrnSwitchbrn-switch, [brnSwitch]
  • checked: boolean
  • disabled: boolean
  • required: boolean
  • checkedChange: EventEmitter<boolean>

Helm API

The helm directives provide the default spartan/ui styling for the switch.

Component / DirectiveSelectorDescription
HlmSwitchhlm-switchMain container representing the switch track.
HlmSwitchThumbbrn-switch-thumb[hlm]The sliding thumb indicator.

Installation & Usage

Installation

Imports

Basic Skeleton