switch
Use role="switch" on a native checkbox. The browser and AngularTS own its
checked state, validation, and form behavior.
<div orientation="horizontal" class="field">
<input id="airplane-mode" type="checkbox" role="switch" />
<label for="airplane-mode">Airplane mode</label>
</div>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Switch</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="mode=false"
data-example="switch-demo"
>
<div class="visual-example">
<input role="switch" id="airplane-mode" type="checkbox" ng-model="mode" />
<label for="airplane-mode">Airplane Mode</label>
<output class="visually-hidden" aria-live="polite">
Mode enabled: <span ng-bind="mode"></span>
</output>
</div>
</body>
</html>
Reference Workflows
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Switch Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="small=false; standard=false; share=false; notifications=true; focus=false; terms=false"
data-example="switch-choice-card switch-description switch-disabled switch-invalid switch-rtl switch-sizes"
>
<main class="switch-workflows">
<section class="switch-workflow-section" aria-label="Switch sizes">
<div class="switch-size-list field-group">
<div orientation="horizontal" class="field">
<input
role="switch"
id="switch-size-sm"
type="checkbox"
size="sm"
ng-model="small"
/>
<label for="switch-size-sm">Small</label>
</div>
<div orientation="horizontal" class="field">
<input
role="switch"
id="switch-size-default"
type="checkbox"
size="default"
ng-model="standard"
/>
<label for="switch-size-default">Default</label>
</div>
</div>
</section>
<section class="switch-workflow-section" aria-label="Disabled switch">
<div orientation="horizontal" class="field">
<input
role="switch"
id="switch-disabled-unchecked"
type="checkbox"
disabled
/>
<label for="switch-disabled-unchecked">Disabled</label>
</div>
</section>
<section class="switch-workflow-section" aria-label="Switch description">
<div orientation="horizontal" class="field">
<section>
<label for="switch-focus-mode">Share across devices</label>
<p>
Focus is shared across devices, and turns off when you leave the
app.
</p>
</section>
<input
role="switch"
id="switch-focus-mode"
type="checkbox"
ng-model="focus"
/>
</div>
</section>
<section class="switch-workflow-section" aria-label="Invalid switch">
<div orientation="horizontal" class="field">
<section>
<label for="switch-terms"> Accept terms and conditions </label>
<p>You must accept the terms and conditions to continue.</p>
</section>
<input
role="switch"
id="switch-terms"
type="checkbox"
aria-invalid="true"
ng-model="terms"
/>
</div>
</section>
<section
class="switch-workflow-section switch-workflow-wide"
aria-label="Switch choice cards"
>
<div class="switch-choice-list field-group">
<label for="switch-share" class="switch-choice">
<div orientation="horizontal" class="field">
<span>
<strong>Share across devices</strong>
<small>
Focus is shared across devices, and turns off when you leave
the app.
</small>
</span>
<input
role="switch"
id="switch-share"
type="checkbox"
ng-model="share"
/>
</div>
</label>
<label for="switch-notifications" class="switch-choice">
<div orientation="horizontal" class="field">
<span>
<strong>Enable notifications</strong>
<small>
Receive notifications when focus mode is enabled or disabled.
</small>
</span>
<input
role="switch"
id="switch-notifications"
type="checkbox"
ng-model="notifications"
/>
</div>
</label>
</div>
</section>
<section
class="switch-workflow-section switch-workflow-wide"
aria-label="RTL switch"
dir="rtl"
lang="ar"
>
<div orientation="horizontal" class="field">
<section>
<label for="switch-focus-mode-rtl"> المشاركة عبر الأجهزة </label>
<p>
يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة
التطبيق.
</p>
</section>
<input
role="switch"
id="switch-focus-mode-rtl"
type="checkbox"
dir="rtl"
/>
</div>
</section>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native checkbox state with switch presentation.
Anatomy
Root styling selector
input[type="checkbox"][role="switch"]
Semantic structure
Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
checked | Authored | Initial native checked state. |
disabled | Authored | Disables native or component interaction. |
required | Authored | Marks a native form value as required. |
role | Authored | Explicit semantic role when native HTML does not provide one. |
size | Authored | Switch size: sm; omit for the default size. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Native checkbox state with switch presentation. AngularCSS supplies styling without a runtime directive. Native HTML owns platform behavior; AngularTS owns application values, commands, and authored state.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Associate every control with a visible label. Preserve native required, disabled, and invalid semantics, and connect help or error text with aria-describedby.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.