Switch
A native checkbox styled as an on/off track-and-thumb toggle, with the same Signal Forms shape as Checkbox.
Switch wraps a native <input type="checkbox" role="switch"> inside an accessible <label>, styled as an
on/off track-and-thumb toggle with a built-in check/cross icon in the thumb.
Minimal example
import { Component, signal } from "@angular/core";
import { SwitchComponent } from "@sinequa/galactik";
@Component({
selector: "sample-component",
imports: [SwitchComponent],
template: `
<switch [(checked)]="enabled" />
<span>{{ enabled() ? 'On' : 'Off' }}</span>
`,
})
export class SampleComponent {
enabled = signal(false);
}Label
Project the label as the content of the switch. It renders to the right of the switch, inside the switch's own
<label>: it names the switch and a click on the text toggles it, as with Checkbox. The content can be
text, optionally with a decorative icon (aria-hidden).
import { Component, signal } from "@angular/core";
import { SwitchComponent } from "@sinequa/galactik";
@Component({
selector: "sample-component",
imports: [SwitchComponent],
template: `<switch [(checked)]="debug">Debug mode</switch>`,
})
export class SampleComponent {
debug = signal(false);
}Accessible name without a label
When the label cannot be projected, name the inner <input role="switch"> with one of the two inputs below.
Do not wrap the switch in a <label>: it already renders its own, and nested labels are invalid.
aria-label: a text, for a switch with no visible label.aria-labelledby: the id of a visible element elsewhere, for a label that must not toggle the switch (for example the header of an expandable card). It takes precedence overaria-labeland over the projected content.
import { Component, signal } from "@angular/core";
import { SwitchComponent } from "@sinequa/galactik";
@Component({
selector: "sample-component",
imports: [SwitchComponent],
template: `
<switch aria-label="Debug mode" [(checked)]="debug" />
<switch aria-labelledby="notifications-label" [(checked)]="notifications" />
<span id="notifications-label">Notifications</span>
`,
})
export class SampleComponent {
debug = signal(false);
notifications = signal(true);
}Options
Prop
Type
Pitfalls
What's next
Radio
A native radio input wrapped in an accessible label, grouped by a shared name and a derived selection signal rather than a container component.
Input
A native input wrapped in a styled flex container that drives its focus, disabled and read-only look purely from the input's own state, with optional icon slots and a character counter.