Switch

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

 import { Component } from '@angular/core';
 
import { RdxLabelDirective } from '@radix-ng/primitives/label';
import { RdxSwitchInputDirective, RdxSwitchRootDirective, RdxSwitchThumbDirective } from '@radix-ng/primitives/switch';
 
@Component({
    selector: 'primitive-switch-demo',
    standalone: true,
    imports: [
        RdxLabelDirective,
        RdxSwitchRootDirective,
        RdxSwitchInputDirective,
        RdxSwitchThumbDirective
    ],
    template: `
        <label class="Label" rdxLabel htmlFor="airplane-mode-model">
            Airplane mode
            <button class="SwitchRoot" id="airplane-mode-model" rdxSwitchRoot>
                <input rdxSwitchInput />
                <span class="SwitchThumb" rdxSwitchThumb></span>
            </button>
        </label>
    `,
    styleUrl: 'switch-demo.css'
})
export class SwitchDemoComponent {}

 :host {
    button {
        all: unset;
    }
}
 
.SwitchRoot {
    width: 42px;
    height: 25px;
    background-color: var(--black-a9);
    border-radius: 9999px;
    margin-left: 15px;
    position: relative;
    box-shadow: 0 2px 10px var(--black-a7);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 
.SwitchRoot:focus {
    box-shadow: 0 0 0 2px black;
}
 
.SwitchRoot[data-state='checked'] {
    background-color: black;
}
 
.SwitchRoot[data-disabled='true'] {
    background-color: var(--black-a6);
    cursor: not-allowed;
    box-shadow: none;
}
 
.SwitchThumb {
    display: block;
    width: 21px;
    height: 21px;
    background-color: white;
    border-radius: 9999px;
    box-shadow: 0 2px 2px var(--black-a7);
    transition: transform 100ms;
    transform: translateX(2px);
    will-change: transform;
}
 
.SwitchThumb[data-state='checked'] {
    transform: translateX(19px);
}
 
.Label {
    color: white;
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
}

Features

Can be controlled or uncontrolled.
Full keyboard navigation.

Anatomy

 <button rdxSwitchRoot>
    <input rdxSwitchInput />
    <span rdxSwitchThumb></span>
</button>

API Reference

Root

RdxSwitchRootDirective

Contains all the parts of a switch. An input will also render when used within a form to ensure events propagate correctly.

Prop	Default	Type
`required`	`—`	`InputSignalWithTransform<boolean, BooleanInput>` When true, indicates that the user must check the switch before the owning form can be submitted.
`ariaLabelledBy`	`—`	`InputSignal<undefined \| string>` Establishes relationships between the component and label(s) where its value should be one or more element IDs.
`ariaLabel`	`—`	`InputSignal<undefined \| string>` Used to define a string that autocomplete attribute the current element.
`checked`	`false`	`ModelSignal<boolean>` The controlled state of the switch. Must be used in conjunction with onCheckedChange.
`defaultChecked`	`—`	`InputSignalWithTransform<boolean, BooleanInput>` The state of the switch when it is initially rendered. Use when you do not need to control its state.
`disabled`	`—`	`InputSignalWithTransform<boolean, BooleanInput>` When `true` , prevents the user from interacting with the switch.

Emit	Payload
`onCheckedChange`	`[value: boolean]` Event handler called when the state of the switch changes.

Input

RdxSwitchInputDirective

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	`Present when disabled`

Thumb

RdxSwitchThumbDirective

The thumb that is used to visually indicate whether the switch is on or off.

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	`Present when disabled`

Accessibility

Adheres to the Switch role requirements .

Radix Angular