AngularCSS

AngularTS Ownership

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS extends AngularTS; it does not replace framework behavior. This rule keeps components predictable and prevents two state systems from disagreeing.

AngularTS owns application state

Use AngularTS for values, commands, collections, and conditional rendering:

<label for="volume">Volume</label>
<input id="volume" type="range" min="0" max="100" ng-model="volume" />
<output>{{ volume }}</output>

ng-model owns the value while the browser owns the range control. No AngularCSS directive is needed. Use ng-range-slider on a parent only when two or more native range inputs must share one visual track.

Introduction

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS provides HTML-first styles and focused interface components for AngularTS. Most interface elements are semantic HTML styled directly by CSS. TypeScript components are reserved for interactions that native HTML, CSS, and AngularTS do not already provide.

AngularCSS is a customization system, not a design system. It provides a stable functional baseline and presentation controls; the application owns its brand, visual language, and product-specific design.

<button variant="outline">Save changes</button>

No directive runs for this button. The browser owns activation and disabled state, AngularTS owns application commands, and CSS targets the native element and authored variant directly.

Composition

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS components expose HTML parts rather than private templates. Compose them when a workflow needs behavior from more than one primitive.

Form field

Combine field, label, input, description, and AngularTS validation:

<div class="field">
 <label for="email">Email</label>
 <input id="email" name="email" ng-model="profile.email" required />
 <p>Used for account notices.</p>
 <p ng-if="profileForm.email.invalid" class="field-error">
 Enter a valid email.
 </p>
</div>

The native input and AngularTS form controller own the value and validity. The field styles the authored label, helper, and error text around the control.

Install AngularCSS

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS is distributed as an npm package. Its behavioral components require AngularTS. Install both packages locally:

npm install @angular-wave/angular.ts @angular-wave/angular.css

No CDN is required. The package includes ESM, UMD, CSS, and TypeScript declaration outputs.

Stylesheet-only setup

Native elements, patterns, foundations, and recipes need only the compiled AngularCSS stylesheet:

@import "@angular-wave/angular.css/dist/angular.css";

<button variant="outline">Save</button>

These entries register no AngularCSS directive. Add AngularTS for application bindings, and load AngularCSS JavaScript with the angular.css dependency when using behavioral components such as tabs or comboboxes.

Accessibility

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS supplies component mechanics, but accessibility depends on the final authored HTML. Every component page documents what the directive generates and what the application must provide.

Start with semantic HTML

Use native elements before adding roles. A button already supports keyboard activation, a label connects to a form control, and a nav exposes a navigation landmark.

Use role only for composite patterns without a suitable native element, such as tabs, menus, and custom listboxes.

Build Your First Component

Mon, 01 Jan 0001 00:00:00 +0000

This page builds an accordion with native details and summary. The browser owns disclosure; AngularTS owns the application value inside the panel.

Add the HTML

<section ng-app="app">
 <section aria-label="Profile sections">
 <details name="profile-sections" open>
 <summary>Profile</summary>
 <div>
 <label for="display-name">Display name</label>
 <input id="display-name" ng-model="profile.name" />
 <output>Preview: {{ profile.name || "Unnamed" }}</output>
 </div>
 </details>
 </section>
</section>

Each direct child is a native disclosure item. The browser creates the trigger relationship and owns open state, focus, and keyboard activation.

Create the application module

import { angular } from "@angular-wave/angular.ts";
import "@angular-wave/angular.css";
import "@angular-wave/angular.css/dist/angular.css";

angular.createModule("app", ["angular.css"]);

No controller is required for this example. ng-model creates the profile name binding in the application scope, and interpolation updates the preview. AngularCSS does not parse or store that value.

Customization

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS is a customization system, not a design system. It supplies a consistent functional baseline and stable presentation controls. Your application still decides its brand, visual language, content hierarchy, and product-specific composition.

Every browser-facing customization control is a CSS custom property. Consumers do not need a token compiler, Tailwind, Sass, JavaScript, or an AngularCSS build step to change the defaults.

Load order

Load AngularCSS before application styles. The bundle declares this low-to-high layer order: base, angularcss.tokens, angularcss.components, components, and utilities.

Testing

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS tests the HTML contract in Chromium with Playwright and validates source, public entrypoints, documentation inventory, AngularTS overlap, and forbidden ports with static checks.

Static checks

npm run check

This command verifies TypeScript, canonical component and element entrypoints, generated declarations, documentation completeness, component test inventory, AngularTS directive ownership, CSS isolation, and test ports.

Component tests

PLAYWRIGHT_PORT=4101 npm run test:components -- --reporter=dot

Use an available port other than 3000 or 4000. The default is 4100; set PLAYWRIGHT_PORT when another local service already owns it.

Compatibility and upgrades

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS declares @angular-wave/angular.ts with the npm latest tag and tests the registry’s current release in CI. A daily compatibility run catches a new AngularTS release even when AngularCSS source has not changed. The package lock still records the exact version used for a reproducible AngularCSS build.

Supported environments

Current Chromium, Firefox, and WebKit engines are required browser projects.
Node.js 24 or newer is required for development, documentation, and package builds.
The distributed CSS and browser JavaScript are prebuilt. Consumers do not need the AngularCSS build toolchain.
Behavioral components require AngularTS. Styling-only foundations, elements, patterns, and recipes can use the compiled stylesheet alone.

AngularCSS uses current platform features including native dialog, the Popover API, CSS custom properties, cascade layers, logical properties, :has(), and @scope. Test the final application against its own supported browser policy, content, localization, zoom, and assistive technology.

Support

Mon, 01 Jan 0001 00:00:00 +0000

Use GitHub Discussions for integration, HTML composition, and customization questions.

Use the issue tracker for reproducible AngularCSS defects and focused feature proposals. Include:

A reduced semantic HTML example.
AngularCSS and AngularTS versions.
Browser and operating system.
Expected and observed behavior.
Keyboard or assistive-technology details when relevant.

Report vulnerabilities through the repository’s private GitHub security advisory flow. Do not place security-sensitive details in a public issue.

The compatibility and upgrades page describes supported environments and the latest-version verification command.

Contributing

Mon, 01 Jan 0001 00:00:00 +0000

Read the repository contribution guide before opening a pull request. It defines the HTML, AngularTS, CSS, and AngularCSS ownership order, local setup, generated documentation workflow, and public API review process.

For shared presentation changes, update the DTCG 2025.10 source rather than editing generated token CSS. For catalog changes, keep root classes minimal and prefer semantic descendants and native attributes. Browser tests must exercise the built standalone example.

The required local sequence is:

accordion

Mon, 01 Jan 0001 00:00:00 +0000

Use an accessibly named section around native details elements. Give sibling items the same name when opening one item should close the others. The semantic structure needs no component class.

<section aria-label="Sections">
 <details name="sections" open>
 <summary>Section 1</summary>
 <div>Content for section 1</div>
 </details>
</section>

Omit name to allow more than one section to remain open.

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 Accordion</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 data-example="accordion-demo">
 <section class="visual-example" aria-label="Shipping questions">
 <details name="shipping-questions" open>
 <summary>What are your shipping options?</summary>
 <div>
 We offer standard (5-7 days), express (2-3 days), and overnight
 shipping. Free shipping on international orders.
 </div>
 </details>
 <details name="shipping-questions">
 <summary>What is your return policy?</summary>
 <div>
 Returns are accepted within 30 days. Items must be unused and in their
 original packaging.
 </div>
 </details>
 <details name="shipping-questions">
 <summary>How can I contact customer support?</summary>
 <div>Reach us by email, live chat, or phone during business hours.</div>
 </details>
 </section>
 </body>
</html>

State Variants

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Accordion State 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
 data-example="accordion-basic accordion-disabled accordion-multiple"
 >
 <main class="accordion-workflow-grid">
 <section
 class="accordion-workflow-section"
 aria-labelledby="accordion-basic-title"
 >
 <h2 id="accordion-basic-title">Account help</h2>
 <section aria-label="Account help questions">
 <details name="account-help" open>
 <summary>How do I reset my password?</summary>
 <div>
 Click Forgot Password on the login page, enter your email address,
 and we'll send you a reset link that expires in 24 hours.
 </div>
 </details>
 <details name="account-help">
 <summary>Can I change my subscription plan?</summary>
 <div>
 You can upgrade or downgrade your plan at any time from your
 account settings.
 </div>
 </details>
 <details name="account-help">
 <summary>What payment methods do you accept?</summary>
 <div>We accept major credit cards, PayPal, and bank transfers.</div>
 </details>
 </section>
 </section>
 <section
 class="accordion-workflow-section"
 aria-labelledby="accordion-disabled-title"
 >
 <h2 id="accordion-disabled-title">Availability</h2>
 <section aria-label="Feature availability questions">
 <details name="availability">
 <summary>Can I access my account history?</summary>
 <div>
 Your complete account history is available from the dashboard.
 </div>
 </details>
 <details name="availability" inert>
 <summary>Premium feature information</summary>
 <div>Upgrade your plan to access premium feature information.</div>
 </details>
 <details name="availability">
 <summary>How do I update my email address?</summary>
 <div>
 Update it in account settings and confirm the verification email.
 </div>
 </details>
 </section>
 </section>
 <section
 class="accordion-workflow-section accordion-workflow-wide"
 aria-labelledby="accordion-multiple-title"
 >
 <h2 id="accordion-multiple-title">Settings</h2>
 <section aria-label="Settings questions">
 <details open>
 <summary>Notification Settings</summary>
 <div>
 Choose email alerts or push notifications for mobile devices.
 </div>
 </details>
 <details>
 <summary>Privacy &amp; Security</summary>
 <div>
 Enable two-factor authentication, review active sessions, and
 configure data sharing.
 </div>
 </details>
 <details>
 <summary>Billing &amp; Subscription</summary>
 <div>View your plan, payment history, and upcoming invoices.</div>
 </details>
 </section>
 </section>
 </main>
 </body>
</html>

Layout Variants

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Accordion Layout 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
 data-example="accordion-borders accordion-card accordion-rtl"
 >
 <main class="accordion-workflow-grid accordion-layout-workflows">
 <section
 class="accordion-workflow-section"
 aria-labelledby="accordion-borders-title"
 >
 <h2 id="accordion-borders-title">Billing questions</h2>
 <section class="accordion-bordered" aria-label="Billing questions">
 <details name="billing" open>
 <summary>How does billing work?</summary>
 <div>
 Billing is charged at the beginning of each monthly or annual
 cycle, and you can cancel anytime.
 </div>
 </details>
 <details name="billing">
 <summary>Is my data secure?</summary>
 <div>
 Data is encrypted at rest and in transit using industry-standard
 protocols.
 </div>
 </details>
 <details name="billing">
 <summary>What integrations do you support?</summary>
 <div>
 Connect popular tools or build custom integrations with our API.
 </div>
 </details>
 </section>
 </section>
 <article
 class="accordion-card-demo card"
 aria-labelledby="accordion-card-title"
 >
 <header>
 <h2 id="accordion-card-title">Subscription &amp; Billing</h2>
 <p>Common questions about plans, payments, and cancellations.</p>
 </header>
 <section>
 <section aria-label="Subscription and billing questions">
 <details name="subscription" open>
 <summary>What subscription plans do you offer?</summary>
 <div>
 Choose Starter, Professional, or Enterprise based on storage,
 API, and support needs.
 </div>
 </details>
 <details name="subscription">
 <summary>How does billing work?</summary>
 <div>
 Billing occurs automatically at the start of each cycle.
 </div>
 </details>
 <details name="subscription">
 <summary>How do I cancel my subscription?</summary>
 <div>
 Cancel from account settings with access through the current
 billing period.
 </div>
 </details>
 </section>
 </section>
 </article>
 <section
 class="accordion-workflow-section accordion-workflow-wide"
 dir="rtl"
 lang="ar"
 aria-labelledby="accordion-rtl-title"
 >
 <h2 id="accordion-rtl-title">الأسئلة الشائعة</h2>
 <section aria-label="الأسئلة الشائعة">
 <details name="arabic-faq" open>
 <summary>كيف يمكنني إعادة تعيين كلمة المرور؟</summary>
 <div>
 انقر على نسيت كلمة المرور في صفحة تسجيل الدخول، وسنرسل لك رابطًا
 لإعادة تعيينها.
 </div>
 </details>
 <details name="arabic-faq">
 <summary>هل يمكنني تغيير خطة الاشتراك الخاصة بي؟</summary>
 <div>يمكنك ترقية خطتك أو تخفيضها في أي وقت من إعدادات الحساب.</div>
 </details>
 <details name="arabic-faq">
 <summary>ما هي طرق الدفع التي تقبلونها؟</summary>
 <div>نقبل بطاقات الائتمان وPayPal والتحويلات المصرفية.</div>
 </details>
 </section>
 </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.

alert

Mon, 01 Jan 0001 00:00:00 +0000

Use section[role="alert"] for important feedback blocks. The default presentation is neutral; add variant="destructive" for destructive feedback or override the AngularCSS color tokens for application-specific colors.

<section role="alert">
 <svg aria-hidden="true"><!-- optional icon --></svg>
 <h2>Saved!</h2>
 <p>Your profile was updated.</p>
 <div>
 <button ng-click="dismiss()">Dismiss</button>
 </div>
</section>

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 Alert</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 data-example="alert-demo">
 <div class="visual-example">
 <section aria-live="assertive" aria-atomic="true" role="alert">
 <svg
 aria-hidden="true"
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 >
 <circle cx="12" cy="12" r="10"></circle>
 <path d="M9 12l2 2 4-4"></path>
 </svg>

 <h2>Payment successful</h2>

 <p>
 Your payment of $29.99 has been processed. A receipt has been sent to
 your email address.
 </p>
 </section>

 <section aria-live="assertive" aria-atomic="true" role="alert">
 <svg
 aria-hidden="true"
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 >
 <circle cx="12" cy="12" r="10"></circle>
 <path d="M12 16v-4" />
 <path d="M12 8h.01" />
 </svg>

 <h2>New feature available</h2>
 <p>
 We've added dark mode support. You can enable it in your account
 settings.
 </p>
 </section>
 </div>
 </body>
</html>

Variants And Composition

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Alert 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="darkModeEnabled=false"
 data-example="alert-action alert-basic alert-colors alert-destructive alert-rtl"
 >
 <main class="alert-workflow-grid">
 <section role="alert">
 <svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
 <circle
 cx="12"
 cy="12"
 r="10"
 stroke="currentColor"
 stroke-width="2"
 />
 <path
 d="m9 12 2 2 4-4"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 <h2>Account updated successfully</h2>
 <p>
 Your profile information has been saved. Changes will be reflected
 immediately.
 </p>
 </section>

 <section aria-live="polite" role="alert">
 <h2>Dark mode is now available</h2>
 <p>Enable it under your profile settings to get started.</p>
 <button
 size="xs"
 type="button"
 ng-click="darkModeEnabled=true"
 ng-disabled="darkModeEnabled"
 >
 {{ darkModeEnabled ? 'Enabled' : 'Enable' }}
 </button>
 </section>

 <section variant="warning" role="alert">
 <svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
 <path
 d="M10.3 2.9 1.8 17a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 2.9a2 2 0 0 0-3.4 0Z"
 stroke="currentColor"
 stroke-width="2"
 stroke-linejoin="round"
 />
 <path
 d="M12 9v4M12 17h.01"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 />
 </svg>
 <h2>Your subscription will expire in 3 days.</h2>
 <p>
 Renew now to avoid service interruption or upgrade to a paid plan.
 </p>
 </section>

 <section variant="destructive" role="alert">
 <svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
 <circle
 cx="12"
 cy="12"
 r="10"
 stroke="currentColor"
 stroke-width="2"
 />
 <path
 d="M12 8v4M12 16h.01"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 />
 </svg>
 <h2>Payment failed</h2>
 <p>
 Your payment could not be processed. Check your payment method and try
 again.
 </p>
 </section>

 <section
 class="alert-rtl-demo"
 dir="rtl"
 lang="ar"
 aria-label="التنبيهات"
 >
 <section role="alert">
 <svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
 <circle
 cx="12"
 cy="12"
 r="10"
 stroke="currentColor"
 stroke-width="2"
 />
 <path
 d="m9 12 2 2 4-4"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 <h2>تم الدفع بنجاح</h2>
 <p>تمت معالجة دفعتك وإرسال إيصال إلى عنوان بريدك الإلكتروني.</p>
 </section>
 <section role="alert">
 <svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
 <circle
 cx="12"
 cy="12"
 r="10"
 stroke="currentColor"
 stroke-width="2"
 />
 <path
 d="M12 16v-4M12 8h.01"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 />
 </svg>
 <h2>ميزة جديدة متاحة</h2>
 <p>لقد أضفنا دعم الوضع الداكن ويمكنك تفعيله في إعدادات حسابك.</p>
 </section>
 </section>

 <output class="output alert-workflow-output">
 Dark mode: {{ darkModeEnabled ? 'enabled' : 'disabled' }}
 </output>
 </main>
 </body>
</html>

Installation

alert-dialog

Mon, 01 Jan 0001 00:00:00 +0000

Use alert dialog parts for destructive or confirmation flows that need a clear action and cancel target.

<section>
 <button commandfor="delete-dialog" command="show-modal">
 Delete project
 </button>
 <dialog id="delete-dialog" role="alertdialog" closedby="closerequest">
 <h2>Delete project?</h2>
 </dialog>
</section>

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 Alert Dialog</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
 data-example="alert-dialog-basic alert-dialog-demo"
 >
 <section id="confirmation-dialog" class="visual-example">
 <button
 type="button"
 commandfor="confirmation-dialog-content"
 command="show-modal"
 variant="outline"
 >
 Show Dialog
 </button>
 <dialog
 role="alertdialog"
 id="confirmation-dialog-content"
 closedby="closerequest"
 aria-labelledby="confirmation-dialog-title"
 aria-describedby="confirmation-dialog-description"
 size="default"
 >
 <header>
 <h2 id="confirmation-dialog-title">Are you absolutely sure?</h2>
 <p id="confirmation-dialog-description">
 This action cannot be undone. This will permanently delete your
 account from our servers.
 </p>
 </header>
 <footer>
 <button
 type="button"
 commandfor="confirmation-dialog-content"
 command="close"
 variant="outline"
 >
 Cancel
 </button>
 <button
 type="button"
 commandfor="confirmation-dialog-content"
 command="close"
 >
 Continue
 </button>
 </footer>
 </dialog>
 </section>
 </body>
</html>

Sizes And Composition

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Alert Dialog 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="chatDeleted=false"
 data-example="alert-dialog-destructive alert-dialog-media alert-dialog-rtl alert-dialog-small alert-dialog-small-media"
 >
 <main class="alert-dialog-workflows">
 <div class="alert-dialog-trigger-grid" aria-label="Alert dialog examples">
 <section id="share-project-dialog">
 <button
 type="button"
 variant="outline"
 commandfor="share-project-dialog-content"
 command="show-modal"
 >
 Share Project
 </button>
 <dialog
 role="alertdialog"
 size="default"
 id="share-project-dialog-content"
 closedby="closerequest"
 aria-labelledby="share-project-dialog-title"
 aria-describedby="share-project-dialog-description"
 >
 <header>
 <figure aria-hidden="true">
 <svg viewBox="0 0 24 24" fill="none">
 <circle
 cx="12"
 cy="12"
 r="9"
 stroke="currentColor"
 stroke-width="2"
 />
 <path
 d="M12 8v8M8 12h8"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 />
 </svg>
 </figure>
 <h2 id="share-project-dialog-title">Share this project?</h2>
 <p id="share-project-dialog-description">
 Anyone with the link will be able to view and edit this project.
 </p>
 </header>
 <footer>
 <button
 type="button"
 variant="outline"
 commandfor="share-project-dialog-content"
 command="close"
 >
 Cancel
 </button>
 <button
 type="button"
 commandfor="share-project-dialog-content"
 command="close"
 >
 Share
 </button>
 </footer>
 </dialog>
 </section>

 <section id="accessory-dialog">
 <button
 type="button"
 variant="outline"
 commandfor="accessory-dialog-content"
 command="show-modal"
 >
 Show Small Dialog
 </button>
 <dialog
 role="alertdialog"
 size="sm"
 id="accessory-dialog-content"
 closedby="closerequest"
 aria-labelledby="accessory-dialog-title"
 aria-describedby="accessory-dialog-description"
 >
 <header>
 <h2 id="accessory-dialog-title">Allow accessory to connect?</h2>
 <p id="accessory-dialog-description">
 Do you want to allow the USB accessory to connect to this
 device?
 </p>
 </header>
 <footer>
 <button
 type="button"
 variant="outline"
 commandfor="accessory-dialog-content"
 command="close"
 >
 Don't allow
 </button>
 <button
 type="button"
 commandfor="accessory-dialog-content"
 command="close"
 >
 Allow
 </button>
 </footer>
 </dialog>
 </section>

 <section id="accessory-media-dialog">
 <button
 type="button"
 variant="outline"
 commandfor="accessory-media-dialog-content"
 command="show-modal"
 >
 Show Small Dialog With Media
 </button>
 <dialog
 role="alertdialog"
 size="sm"
 id="accessory-media-dialog-content"
 closedby="closerequest"
 aria-labelledby="accessory-media-dialog-title"
 aria-describedby="accessory-media-dialog-description"
 >
 <header>
 <figure aria-hidden="true">
 <svg viewBox="0 0 24 24" fill="none">
 <path
 d="m7 7 10 10-5 5V2l5 5L7 17"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </figure>
 <h2 id="accessory-media-dialog-title">
 Allow accessory to connect?
 </h2>
 <p id="accessory-media-dialog-description">
 Do you want to allow the USB accessory to connect to this
 device?
 </p>
 </header>
 <footer>
 <button
 type="button"
 variant="outline"
 commandfor="accessory-media-dialog-content"
 command="close"
 >
 Don't allow
 </button>
 <button
 type="button"
 commandfor="accessory-media-dialog-content"
 command="close"
 >
 Allow
 </button>
 </footer>
 </dialog>
 </section>

 <section id="delete-chat-dialog">
 <button
 type="button"
 variant="destructive"
 commandfor="delete-chat-dialog-content"
 command="show-modal"
 >
 Delete Chat
 </button>
 <dialog
 role="alertdialog"
 size="sm"
 id="delete-chat-dialog-content"
 closedby="closerequest"
 aria-labelledby="delete-chat-dialog-title"
 aria-describedby="delete-chat-dialog-description"
 >
 <header>
 <figure class="alert-dialog-media-destructive" aria-hidden="true">
 <svg viewBox="0 0 24 24" fill="none">
 <path
 d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v5M14 11v5"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </figure>
 <h2 id="delete-chat-dialog-title">Delete chat?</h2>
 <p id="delete-chat-dialog-description">
 This will permanently delete this chat conversation. View
 <a href="#settings">Settings</a> to delete saved memories.
 </p>
 </header>
 <footer>
 <button
 type="button"
 variant="outline"
 commandfor="delete-chat-dialog-content"
 command="close"
 >
 Cancel
 </button>
 <button
 type="button"
 variant="destructive"
 ng-click="chatDeleted=true"
 commandfor="delete-chat-dialog-content"
 command="close"
 >
 Delete
 </button>
 </footer>
 </dialog>
 </section>

 <div class="alert-dialog-rtl-triggers" dir="rtl" lang="ar">
 <section id="rtl-confirmation-dialog">
 <button
 type="button"
 variant="outline"
 commandfor="rtl-confirmation-dialog-content"
 command="show-modal"
 >
 إظهار الحوار
 </button>
 <dialog
 role="alertdialog"
 size="default"
 id="rtl-confirmation-dialog-content"
 closedby="closerequest"
 aria-labelledby="rtl-confirmation-dialog-title"
 aria-describedby="rtl-confirmation-dialog-description"
 >
 <header>
 <h2 id="rtl-confirmation-dialog-title">هل أنت متأكد تمامًا؟</h2>
 <p id="rtl-confirmation-dialog-description">
 لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك
 نهائيًا من خوادمنا.
 </p>
 </header>
 <footer>
 <button
 type="button"
 variant="outline"
 commandfor="rtl-confirmation-dialog-content"
 command="close"
 >
 إلغاء
 </button>
 <button
 type="button"
 commandfor="rtl-confirmation-dialog-content"
 command="close"
 >
 متابعة
 </button>
 </footer>
 </dialog>
 </section>

 <section id="rtl-accessory-dialog">
 <button
 type="button"
 variant="outline"
 commandfor="rtl-accessory-dialog-content"
 command="show-modal"
 >
 إظهار الحوار (صغير)
 </button>
 <dialog
 role="alertdialog"
 size="sm"
 id="rtl-accessory-dialog-content"
 closedby="closerequest"
 aria-labelledby="rtl-accessory-dialog-title"
 aria-describedby="rtl-accessory-dialog-description"
 >
 <header>
 <figure aria-hidden="true">
 <svg viewBox="0 0 24 24" fill="none">
 <path
 d="m7 7 10 10-5 5V2l5 5L7 17"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </figure>
 <h2 id="rtl-accessory-dialog-title">السماح للملحق بالاتصال؟</h2>
 <p id="rtl-accessory-dialog-description">
 هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟
 </p>
 </header>
 <footer>
 <button
 type="button"
 variant="outline"
 commandfor="rtl-accessory-dialog-content"
 command="close"
 >
 عدم السماح
 </button>
 <button
 type="button"
 commandfor="rtl-accessory-dialog-content"
 command="close"
 >
 السماح
 </button>
 </footer>
 </dialog>
 </section>
 </div>
 </div>
 <output class="output">
 Chat: {{ chatDeleted ? 'deleted' : 'available' }}
 </output>
 </main>
 </body>
</html>

Installation

application-shell

Mon, 01 Jan 0001 00:00:00 +0000

Compose a persistent application header, the existing Sidebar, and a semantic main workspace. Routing, permissions, and page content remain application-owned. The reference uses the Sidebar’s responsive attribute so navigation starts off-canvas on narrow screens without adding an application-specific class.

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 Application Shell</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 data-example="application-shell-demo">
 <section class="application-shell">
 <header>
 <button
 size="icon-sm"
 variant="ghost"
 aria-label="Toggle navigation"
 aria-controls="enterprise-navigation"
 >
 ☰
 </button>
 <a href="#workspace">Northstar Operations</a>
 <menu>
 <button size="sm" variant="outline">Help</button>
 <button size="icon-sm" variant="ghost" aria-label="Account">
 AL
 </button>
 </menu>
 </header>
 <aside
 id="enterprise-navigation"
 ng-sidebar
 collapsible="offcanvas"
 responsive
 aria-label="Primary navigation"
 >
 <div>
 <nav>
 <section>
 <h2>Workspace</h2>
 <ul>
 <li>
 <a href="#overview" aria-current="page"
 ><span>Overview</span></a
 >
 </li>
 <li>
 <a href="#customers"><span>Customers</span></a>
 </li>
 <li>
 <a href="#orders"><span>Orders</span></a>
 </li>
 </ul>
 </section>
 </nav>
 </div>
 </aside>
 <main id="workspace">
 <article class="card">
 <header>
 <h1>Operations overview</h1>
 <p>Review current work and open exceptions.</p>
 </header>
 <section>All systems are operating normally.</section>
 </article>
 </main>
 </section>
 </body>
</html>

Installation

aspect-ratio

Mon, 01 Jan 0001 00:00:00 +0000

Set ratio on a figure and optionally override --ratio. Direct images, videos, and iframes fill the figure with object-fit: cover; applications may override that fit when media should not crop.

<figure ratio="16 / 9">
 <img src="photo.jpg" alt="Photo" />
</figure>

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 Aspect Ratio</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 data-example="aspect-ratio-demo">
 <figure ratio="16 / 9" class="visual-example">
 <img src="../../images/avatars/01.png" alt="Photo" />
 </figure>
 </body>
</html>

Ratios And Direction

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Aspect Ratio 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
 data-example="aspect-ratio-portrait aspect-ratio-rtl aspect-ratio-square"
 >
 <main class="aspect-ratio-workflows">
 <figure
 ratio="9 / 16"
 class="aspect-ratio-portrait"
 aria-label="Portrait aspect ratio"
 >
 <img src="../../images/avatars/01.png" alt="Photo" />
 </figure>

 <figure
 ratio="1 / 1"
 class="aspect-ratio-square"
 aria-label="Square aspect ratio"
 >
 <img src="../../images/avatars/01.png" alt="Photo" />
 </figure>

 <figure class="aspect-ratio-rtl" dir="rtl" lang="ar">
 <figure ratio="16 / 9" aria-label="Landscape aspect ratio">
 <img src="../../images/avatars/01.png" alt="صورة" />
 </figure>
 <figcaption>منظر طبيعي جميل</figcaption>
 </figure>
 </main>
 </body>
</html>

Installation

avatar

Mon, 01 Jan 0001 00:00:00 +0000

Use .avatar with a native image or authored fallback, plus an optional badge. Place adjacent avatars and a native output in one wrapper to form a group.

<span class="avatar" aria-label="Jane Doe">
 <span>JD</span>
 <output></output>
</span>

<span>
 <span class="avatar"><img src="avatar.jpg" alt="Alex Brown" /></span>
 <output>+3</output>
</span>

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 Avatar</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
 data-example="avatar-badge avatar-basic avatar-demo avatar-group avatar-group-count"
 >
 <div class="visual-example">
 <span class="avatar">
 <img
 class="avatar-grayscale"
 src="../../images/avatars/01.png"
 alt="Profile portrait"
 />
 <span>CN</span>
 </span>
 <span class="avatar">
 <img src="../../images/avatars/02.png" alt="Profile portrait" />
 <span>ER</span>
 <output variant="success"></output>
 </span>
 <span class="avatar" aria-label="Jane Doe">
 <span>JD</span>
 </span>
 <span class="avatar-grayscale">
 <span class="avatar">
 <img src="../../images/avatars/01.png" alt="Profile portrait" />
 <span>CN</span>
 </span>
 <span class="avatar">
 <img src="../../images/avatars/03.png" alt="Profile portrait" />
 <span>LR</span>
 </span>
 <span class="avatar">
 <img src="../../images/avatars/04.png" alt="Profile portrait" />
 <span>ER</span>
 </span>
 <output>+3</output>
 </span>
 </div>
 </body>
</html>

Variants And Composition

Use size="sm", the default size, or size="lg". Badge icons, grouped counts, RTL layouts, and dropdown triggers compose from the same semantic parts without changing Avatar behavior.

badge

Mon, 01 Jan 0001 00:00:00 +0000

Use class="badge" on an inline element and set variant for appearance.

<span class="badge">Default</span>
<span variant="secondary" class="badge">Secondary</span>
<span variant="outline" class="badge">Outline</span>

For user-selected colors, use variant="custom" and set --badge-background. Browsers with contrast-color() choose a black or white foreground; set --badge-foreground when the application requires a specific contrast result.

<span variant="custom" class="badge" style="--badge-background: var(--cyan-9)">
 Custom
</span>

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 Badge</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 data-example="badge-demo">
 <div class="row visual-example">
 <span class="badge">Badge</span>
 <span variant="secondary" class="badge">Secondary</span>
 <span variant="destructive" class="badge">Destructive</span>
 <span variant="outline" class="badge">Outline</span>
 <span
 variant="custom"
 class="badge"
 style="--badge-background: var(--cyan-9)"
 >
 Custom
 </span>
 </div>
 </body>
</html>

Composition 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 Badge 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
 data-example="badge-colors badge-icon badge-link badge-rtl badge-spinner badge-variants"
 >
 <main class="workflow-stack">
 <div class="workflow-row" aria-label="Badge variants">
 <span class="badge">Default</span>
 <span variant="secondary" class="badge">Secondary</span>
 <span variant="destructive" class="badge">Destructive</span>
 <span variant="outline" class="badge">Outline</span>
 <span variant="ghost" class="badge">Ghost</span>
 </div>

 <div class="workflow-row" aria-label="Badge custom colors">
 <span class="badge-color-blue badge">Blue</span>
 <span class="badge-color-green badge">Green</span>
 <span class="badge-color-sky badge">Sky</span>
 <span class="badge-color-purple badge">Purple</span>
 <span class="badge-color-red badge">Red</span>
 </div>

 <div class="workflow-row" aria-label="Badges with icons">
 <span variant="secondary" class="badge">
 <svg
 icon="inline-start"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path
 d="m9 12 2 2 4-4M12 3l2.2 1.5 2.7-.1.8 2.6 2.2 1.5-.9 2.5.9 2.5-2.2 1.5-.8 2.6-2.7-.1L12 21l-2.2-1.5-2.7.1-.8-2.6L4.1 15l.9-2.5-.9-2.5L6.3 7l.8-2.6 2.7.1L12 3Z"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 Verified
 </span>
 <span variant="outline" class="badge">
 Bookmark
 <svg
 icon="inline-end"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path
 d="M6 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18l-6-4-6 4V4Z"
 stroke="currentColor"
 stroke-width="2"
 stroke-linejoin="round"
 />
 </svg>
 </span>
 <a href="#link" class="badge">
 Open Link
 <svg
 icon="inline-end"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path
 d="M7 17 17 7M7 7h10v10"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </a>
 </div>

 <div class="workflow-row" aria-label="Badges with loading status">
 <span variant="destructive" class="badge">
 <svg
 icon="inline-start"
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 class="spinner"
 >
 <path
 d="M21 12a9 9 0 1 1-6.22-8.56"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 />
 </svg>
 Deleting
 </span>
 <span variant="secondary" class="badge">
 Generating
 <svg
 icon="inline-end"
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 class="spinner"
 >
 <path
 d="M21 12a9 9 0 1 1-6.22-8.56"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 />
 </svg>
 </span>
 </div>

 <div class="workflow-row" dir="rtl" aria-label="RTL badges">
 <span class="badge">شارة</span>
 <span variant="secondary" class="badge">ثانوي</span>
 <span variant="destructive" class="badge">مدمر</span>
 <span variant="outline" class="badge">مخطط</span>
 </div>
 </main>
 </body>
</html>

Installation

Bookings operations

Mon, 01 Jan 0001 00:00:00 +0000

This AngularTS application composes sidebar, input group, tabs, badge, avatar, scroll area, empty, button, and dialog components into a responsive upcoming bookings workflow. Search, status filtering, booking selection, dialog state, and mobile navigation are functional. All scripts, styles, and Lucide icons are bundled locally.

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Bookings</title>
 <link rel="stylesheet" href="../../../css/preflight.css" />
 <link rel="stylesheet" href="../../../css/angular.css" />
 <link rel="stylesheet" href="./bookings.css" />
 <script src="../../../js/angular-ts.umd.js"></script>
 <script src="../../../js/angular-css.umd.js"></script>
 <script src="./bookings.js"></script>
 </head>
 <body
 ng-app="bookingsDemo"
 ng-controller="BookingsController as bookings"
 ng-cloak
 >
 <div class="booking-shell" data-testid="booking-shell">
 <nav class="booking-rail" aria-label="Application navigation">
 <a class="booking-brand" href="./" aria-label="OrbitPass home">O</a>
 <div class="booking-rail-primary">
 <a href="#search" aria-label="Search"
 ><span ng-icon="search"></span
 ></a>
 <a class="is-active" href="#bookings" aria-label="Bookings">
 <span ng-icon="bookings"></span><small>Bookings</small>
 </a>
 <a href="#support" aria-label="Support">
 <span ng-icon="support"></span><small>Support</small>
 </a>
 <a href="#admin" aria-label="Admin">
 <span ng-icon="settings"></span><small>Admin</small>
 </a>
 </div>
 <div class="booking-rail-footer">
 <button type="button" aria-label="Notifications">
 <span ng-icon="bell"></span><span class="notification-dot"></span>
 </button>
 <span size="sm" class="avatar">
 <span>EE</span>
 <output aria-label="Online"></output>
 </span>
 </div>
 </nav>

 <aside
 id="booking-sidebar"
 class="booking-secondary"
 ng-sidebar
 style="--sidebar-width: 14rem"
 >
 <div>
 <header class="booking-sidebar-header">
 <strong>Bookings</strong>
 <button size="icon-sm" variant="ghost" aria-label="Add booking">
 <span ng-icon="plus"></span>
 </button>
 </header>
 <hr />
 <nav>
 <section>
 <div>
 <ul>
 <li>
 <button aria-current="page">
 <span ng-icon="bookings"></span><span>Upcoming</span>
 </button>
 <output>40</output>
 </li>
 <li>
 <button>
 <span ng-icon="clock"></span><span>Past</span>
 </button>
 <output>0</output>
 </li>
 <li>
 <button>
 <span ng-icon="customers"></span><span>Customers</span>
 </button>
 <output>21</output>
 </li>
 <li>
 <button>
 <span ng-icon="invoices"></span><span>Invoices</span>
 </button>
 <output>0</output>
 </li>
 </ul>
 </div>
 </section>
 </nav>
 <footer class="booking-sidebar-footer">
 <span class="muted">Signed in as</span>
 <strong>Emma Executive</strong>
 </footer>
 </div>
 </aside>

 <main class="booking-main" id="bookings">
 <header class="booking-toolbar">
 <div class="booking-title-row">
 <button
 class="booking-mobile-menu"
 size="icon-sm"
 variant="outline"
 aria-controls="booking-sidebar"
 aria-label="Toggle booking navigation"
 >
 <span ng-icon="menu"></span>
 </button>
 <div>
 <span class="booking-eyebrow">Bookings</span>
 <h1>Upcoming</h1>
 </div>
 </div>
 <div class="booking-search input-group">
 <span ng-icon="search"></span>
 <input
 ng-model="bookings.query"
 data-change="bookings.updateVisible()"
 type="search"
 aria-label="Search bookings"
 placeholder="Search bookings"
 />
 <span align="inline-end">
 <kbd>/</kbd>
 </span>
 </div>
 </header>

 <div class="booking-filterbar">
 <nav variant="line" aria-label="Booking status">
 <button
 type="button"
 aria-pressed="{{ bookings.status === 'All' }}"
 ng-click="bookings.setStatus('All')"
 >
 All
 </button>
 <button
 ng-click="bookings.setStatus('Confirmed')"
 aria-pressed="{{ bookings.status === 'Confirmed' }}"
 >
 Confirmed
 </button>
 <button
 ng-click="bookings.setStatus('Pending')"
 aria-pressed="{{ bookings.status === 'Pending' }}"
 >
 Pending
 </button>
 <button
 ng-click="bookings.setStatus('Change Requested')"
 aria-pressed="{{ bookings.status === 'Change Requested' }}"
 >
 Change requested
 </button>
 </nav>
 <span class="booking-result-count">
 <strong ng-bind="bookings.visibleCount"></strong> results
 </span>
 </div>

 <section
 class="booking-scroll scroll-area"
 tabindex="0"
 aria-label="Bookings"
 >
 <div class="booking-list" aria-live="polite">
 <article
 class="booking-row"
 ng-repeat="booking in bookings.bookings"
 ng-show="booking.visible"
 >
 <button
 class="booking-row-trigger"
 type="button"
 aria-controls="booking-detail-dialog-content"
 commandfor="booking-detail-dialog-content"
 command="show-modal"
 ng-click="bookings.select(booking)"
 >
 <span class="booking-summary">
 <span
 class="booking-reference"
 ng-bind="booking.reference"
 ></span>
 <span
 ><span ng-icon="ticket"></span
 ><span ng-bind="booking.service"></span
 ></span>
 <span
 ><span ng-icon="rocket"></span
 ><span ng-bind="booking.vessel"></span
 ></span>
 <span
 status="{{ booking.status }}"
 ng-bind="booking.status"
 class="badge"
 ></span>
 </span>

 <span class="booking-route">
 <span class="booking-place">
 <strong ng-bind="booking.origin"></strong>
 <span ng-bind="booking.departure"></span>
 </span>
 <span class="booking-journey" aria-hidden="true">
 <span class="booking-route-line"></span>
 <span ng-icon="plane"></span>
 <small ng-bind="booking.duration"></small>
 </span>
 <span class="booking-place booking-destination">
 <strong ng-bind="booking.destination"></strong>
 <span ng-bind="booking.arrival"></span>
 </span>
 </span>

 <span class="booking-meta">
 <span
 ><span ng-icon="customer"></span
 ><span ng-bind="booking.customer"></span
 ></span>
 <span
 ><span ng-icon="ticket"></span
 ><span ng-bind="booking.customerId"></span
 ></span>
 <span
 ><span ng-icon="home"></span
 ><span ng-bind="booking.cabin"></span
 ></span>
 <span
 ><span ng-icon="luggage"></span
 ><span ng-bind="booking.luggage"></span
 ></span>
 <span
 ><span ng-icon="luggage"></span
 ><span ng-bind="booking.allowance"></span
 ></span>
 </span>
 </button>
 </article>

 <section ng-show="bookings.empty" class="booking-empty empty">
 <figure>
 <span ng-icon="search"></span>
 </figure>
 <h2>No bookings found</h2>
 <p>Try a different search or status.</p>
 </section>
 </div>
 </section>
 </main>
 </div>

 <section id="booking-detail-dialog" class="booking-dialog dialog">
 <dialog
 id="booking-detail-dialog-content"
 closedby="any"
 aria-labelledby="booking-dialog-title"
 aria-describedby="booking-dialog-description"
 >
 <header>
 <span
 class="booking-dialog-reference"
 ng-bind="bookings.selected.reference"
 ></span>
 <h2 id="booking-dialog-title">Booking details</h2>
 <p id="booking-dialog-description">
 <span ng-bind="bookings.selected.customer"></span> traveling from
 <span ng-bind="bookings.selected.origin"></span> to
 <span ng-bind="bookings.selected.destination"></span>.
 </p>
 </header>
 <dl class="booking-detail-grid">
 <div>
 <dt>Service</dt>
 <dd ng-bind="bookings.selected.service"></dd>
 </div>
 <div>
 <dt>Status</dt>
 <dd ng-bind="bookings.selected.status"></dd>
 </div>
 <div>
 <dt>Departure</dt>
 <dd ng-bind="bookings.selected.departure"></dd>
 </div>
 <div>
 <dt>Arrival</dt>
 <dd ng-bind="bookings.selected.arrival"></dd>
 </div>
 <div class="booking-detail-wide">
 <dt>Cabin</dt>
 <dd ng-bind="bookings.selected.cabin"></dd>
 </div>
 </dl>
 <footer>
 <button
 commandfor="booking-detail-dialog-content"
 command="close"
 variant="outline"
 >
 Close
 </button>
 <button>Open booking</button>
 </footer>
 </dialog>
 </section>
 </body>
</html>

breadcrumb

Mon, 01 Jan 0001 00:00:00 +0000

Use a .breadcrumb navigation landmark with a native ordered list, links, separators, and aria-current="page" for the current location. The class distinguishes the trail from other navigation landmarks.

<nav aria-label="breadcrumb" class="breadcrumb">
 <ol>
 <li>
 <a href="#">Home</a>
 </li>
 <li aria-hidden="true">/</li>
 <li>
 <span aria-current="page">Docs</span>
 </li>
 </ol>
</nav>

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 Breadcrumb</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
 data-example="breadcrumb-basic breadcrumb-link"
 >
 <nav aria-label="breadcrumb" class="breadcrumb">
 <ol>
 <li>
 <a href="#">Home</a>
 </li>
 <li aria-hidden="true">/</li>
 <li>
 <a href="#">Components</a>
 </li>
 <li aria-hidden="true">/</li>
 <li>
 <span aria-current="page">Breadcrumb</span>
 </li>
 </ol>
 </nav>
 </body>
</html>

Variants And Composition

Empty separator and ellipsis parts receive their standard icons. Author custom separator content directly, and compose dropdowns with the existing semantic Dropdown component.

button

Mon, 01 Jan 0001 00:00:00 +0000

Native button elements and button-type inputs are styled directly. Set variant/size attributes for variants and spacing. A link may opt into the same presentation with a variant attribute when it navigates to another location.

<div class="row">
 <button>Default</button>
 <button variant="outline">Outline</button>
 <button size="sm">Small</button>
</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 Button</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 data-example="button-demo">
 <div class="row visual-example">
 <button variant="outline">Button</button>
 <button variant="outline" size="icon" aria-label="Submit">
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="m5 12 7-7 7 7M12 19V5"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </button>
 </div>
 </body>
</html>

Variant 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 Button 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
 data-example="button-default button-destructive button-ghost button-icon button-link button-outline button-render button-rounded button-rtl button-secondary button-size button-spinner button-with-icon"
 >
 <main class="workflow-stack">
 <div class="workflow-row" aria-label="Button variants">
 <button>Button</button>
 <button variant="secondary">Secondary</button>
 <button variant="destructive">Destructive</button>
 <button variant="outline">Outline</button>
 <button variant="ghost">Ghost</button>
 <button variant="link">Link</button>
 </div>

 <div class="workflow-row" aria-label="Status buttons">
 <button variant="info">Information</button>
 <button variant="success">Success</button>
 <button variant="warning">Warning</button>
 </div>

 <div class="workflow-row workflow-sizes" aria-label="Button sizes">
 <button size="xs" variant="outline">Extra Small</button>
 <button
 size="icon-xs"
 variant="outline"
 aria-label="Submit extra small"
 >
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M7 17 17 7M7 7h10v10"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </button>
 <button size="sm" variant="outline">Small</button>
 <button size="icon-sm" variant="outline" aria-label="Submit small">
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M7 17 17 7M7 7h10v10"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </button>
 <button variant="outline">Default</button>
 <button size="icon" variant="outline" aria-label="Submit default">
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M7 17 17 7M7 7h10v10"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </button>
 <button size="lg" variant="outline">Large</button>
 <button size="icon-lg" variant="outline" aria-label="Submit large">
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M7 17 17 7M7 7h10v10"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </button>
 </div>

 <div class="workflow-row" aria-label="Rounded and icon buttons">
 <a href="#login" variant="secondary" size="sm">Login</a>
 <button type="submit" class="button-rounded">Get Started</button>
 <button
 class="button-rounded"
 variant="outline"
 size="icon"
 aria-label="Continue"
 >
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="m5 12 7-7 7 7M12 19V5"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </button>
 <button variant="outline">
 <svg
 icon="inline-start"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path
 d="M6 3v12M18 9v12M6 9c6 0 6 6 12 6M18 3v3"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 />
 </svg>
 New Branch
 </button>
 <button variant="outline">
 Fork
 <svg
 icon="inline-end"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path
 d="M6 3v12M18 9v12M6 9c6 0 6 6 12 6M18 3v3"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 />
 </svg>
 </button>
 </div>

 <div class="workflow-row" aria-label="Loading buttons">
 <button variant="outline" disabled>
 <svg
 icon="inline-start"
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 class="spinner"
 >
 <path
 d="M21 12a9 9 0 1 1-6.22-8.56"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 />
 </svg>
 Generating
 </button>
 <button variant="secondary" aria-disabled="true">
 Downloading
 <svg
 icon="inline-end"
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 class="spinner"
 >
 <path
 d="M21 12a9 9 0 1 1-6.22-8.56"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 />
 </svg>
 </button>
 </div>

 <div class="workflow-row" dir="rtl" aria-label="RTL buttons">
 <button variant="outline">زر</button>
 <button variant="destructive">حذف</button>
 <button variant="outline">
 إرسال
 <svg
 icon="inline-end"
 class="rtl-flip"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path
 d="m9 18 6-6-6-6"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </button>
 </div>
 </main>
 </body>
</html>

Installation

button-group

Mon, 01 Jan 0001 00:00:00 +0000

Use fieldset[role="group"] around related commands or form controls. Set orientation="vertical" for stacked groups. Use Toggle Group when the controls represent one or more selectable values.

<fieldset role="group">
 <button>One</button>
 <hr />
 <button>Two</button>
</fieldset>

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 Button Group</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="buttonGroupAction = 'None'"
 data-example="button-group-demo button-group-orientation separator button-group-size button-group-split"
 >
 <main class="visual-example">
 <section aria-label="Button group sizes">
 <div aria-label="State ownership" role="group">
 <button
 id="button-group-unmanaged"
 type="button"
 variant="outline"
 size="sm"
 >
 Small
 </button>
 <button
 id="button-group-managed"
 type="button"
 variant="outline"
 size="sm"
 aria-pressed="true"
 >
 Button
 </button>
 <button type="button" variant="outline" size="sm">Group</button>
 <button
 type="button"
 variant="outline"
 size="icon-sm"
 aria-label="Add small"
 >
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="M5 12h14M12 5v14" />
 </svg>
 </button>
 </div>
 <div role="group">
 <button type="button" variant="outline">Default</button>
 <button type="button" variant="outline">Button</button>
 <button type="button" variant="outline">Group</button>
 <button
 type="button"
 variant="outline"
 size="icon"
 aria-label="Add default"
 >
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="M5 12h14M12 5v14" />
 </svg>
 </button>
 </div>
 <div role="group">
 <button type="button" variant="outline" size="lg">Large</button>
 <button type="button" variant="outline" size="lg">Button</button>
 <button type="button" variant="outline" size="lg">Group</button>
 <button
 type="button"
 variant="outline"
 size="icon-lg"
 aria-label="Add large"
 >
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="M5 12h14M12 5v14" />
 </svg>
 </button>
 </div>
 </section>

 <fieldset orientation="vertical" aria-label="Media controls" role="group">
 <button
 type="button"
 variant="outline"
 size="icon"
 aria-label="Increase"
 >
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="M5 12h14M12 5v14" />
 </svg>
 </button>
 <hr />
 <button
 type="button"
 variant="outline"
 size="icon"
 aria-label="Decrease"
 >
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="M5 12h14" />
 </svg>
 </button>
 </fieldset>

 <section aria-label="Button group compositions">
 <div role="group">
 <button
 type="button"
 variant="secondary"
 size="sm"
 ng-click="buttonGroupAction = 'Copy'"
 >
 Copy
 </button>
 <hr aria-orientation="vertical" />
 <button
 type="button"
 variant="secondary"
 size="sm"
 ng-click="buttonGroupAction = 'Paste'"
 >
 Paste
 </button>
 </div>
 <div role="group">
 <button
 type="button"
 variant="secondary"
 ng-click="buttonGroupAction = 'Button'"
 >
 Button
 </button>
 <hr aria-orientation="vertical" />
 <button
 type="button"
 variant="secondary"
 size="icon"
 aria-label="Add item"
 ng-click="buttonGroupAction = 'Add'"
 >
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="M5 12h14M12 5v14" />
 </svg>
 </button>
 </div>
 </section>
 <output class="output">Action: {{ buttonGroupAction }}</output>
 </main>
 </body>
</html>

Composition Workflows

Button groups can connect nested groups, inputs, input groups, Select, Dropdown, and Popover triggers. Each composed component retains its own behavior and application state.

calendar

Mon, 01 Jan 0001 00:00:00 +0000

Use data-calendar-generated with data-month="YYYY-MM" to render a complete month, including outside days. Previous and next controls update the visible month, while selecting a date updates data-value and emits angularcss:calendar-select. Bind that event with AngularTS ng-on-* so application state remains responsible for the selected value.

<section
 ng-calendar
 data-calendar-generated
 data-month="2026-05"
 data-value="{{ selectedDate }}"
 ng-on-angularcss:calendar-select="selectedDate = $event.detail.value"
>
 <header>
 <button type="button">Previous</button>
 <h2></h2>
 <button type="button">Next</button>
 </header>
 <div></div>
</section>

Use data-week-start="0" through "6" to choose the first weekday and data-show-outside-days="false" to hide outside dates. Set --calendar-cell-size in CSS to resize cells. Day cells support arrow keys, Home, End, Page Up, and Page Down. Month changes emit angularcss:calendar-month-change.

card

Mon, 01 Jan 0001 00:00:00 +0000

Use article.card with optional semantic header, content, footer, and action regions. Direct headers, headings, and header paragraphs need no part classes.

<article class="card">
 <header>
 <h2>Title</h2>
 <p>Optional description</p>
 <menu>Action</menu>
 </header>
 <section>Content</section>
 <footer>Footer</footer>
</article>

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 Card</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 data-example="card-demo">
 <article class="visual-example card">
 <header>
 <h2>Login to your account</h2>
 <p>Enter your email below to login to your account</p>
 <menu>
 <button variant="link" type="button">Sign Up</button>
 </menu>
 </header>
 <section>
 <form class="card-form" id="login-form">
 <div class="card-field">
 <label for="card-email">Email</label>
 <input
 id="card-email"
 type="email"
 placeholder="m@example.com"
 required
 />
 </div>
 <div class="card-field">
 <div class="card-label-row">
 <label for="card-password">Password</label>
 <a href="#forgot-password">Forgot your password?</a>
 </div>
 <input id="card-password" type="password" required />
 </div>
 </form>
 </section>
 <footer class="card-footer-stacked">
 <button type="submit" form="login-form">Login</button>
 <button variant="outline" type="button">Login with Google</button>
 </footer>
 </article>
 </body>
</html>

Image And RTL

Card content remains ordinary semantic HTML. Use local images, logical CSS properties, and AngularTS form or command directives for application state.

carousel

Mon, 01 Jan 0001 00:00:00 +0000

Use a required content viewport and track around authored slide items. The TypeScript directive initializes the locally bundled Embla engine, synchronizes controls and accessible state, and supports pointer dragging and keyboard navigation.

<section
 ng-carousel
 align="start"
 style="--carousel-item-size: 50%; --carousel-gap: 0.5rem"
>
 <div>
 <ul>
 <li>Slide</li>
 </ul>
 </div>
</section>

Use orientation="vertical" for vertical movement and dir="rtl" for RTL. --carousel-item-size controls single or multi-item layouts and --carousel-gap controls spacing. Add autoplay and optionally autoplay-delay="2000" for the same locally bundled plugin behavior as the checked-in reference. The root mirrors snap index, snap count, item count, and boundary state.

chart

Mon, 01 Jan 0001 00:00:00 +0000

Use Chart to frame application-rendered HTML, SVG, canvas, or a locally bundled chart library with a consistent container, axis, legend, and tooltip contract. For simple authored HTML plots, data-value and data-color synchronize to --value and --chart-color.

<figure aria-label="Monthly visitors" class="chart">
 <section>
 <hr />
 <ul>
 <li>
 <span
 aria-label="January desktop"
 data-value="72%"
 data-color="var(--chart-1)"
 ></span>
 </li>
 </ul>
 </section>
 <footer><span>Jan</span></footer>
</figure>

AngularCSS does not implement a chart engine. Plotting, scales, data, formatting, hover selection, and active-series state remain with authored HTML, the application’s selected chart library, and AngularTS. This keeps Chart from covering AngularTS application behavior while providing stable semantic and customization hooks.

checkbox

Mon, 01 Jan 0001 00:00:00 +0000

Use a native checkbox input. AngularCSS styles it directly; native input state and AngularTS ng-model remain the source of truth. Use role="switch" only when the checkbox needs switch semantics and presentation.

<div orientation="horizontal" class="field">
 <input id="terms" name="terms" type="checkbox" ng-model="terms" />
 <label for="terms"> Accept terms </label>
</div>

Set the native HTMLInputElement.indeterminate property from application code when a mixed selection is needed. Native :indeterminate state owns both the visual and accessibility contract; AngularCSS does not create a second checkbox model.

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 Checkbox</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="terms=false;termsDetails=true;wrappedNotifications=false"
 data-example="checkbox-demo"
 >
 <div class="visual-example field-group">
 <div orientation="horizontal" class="field">
 <input
 id="terms-checkbox"
 name="terms-checkbox"
 type="checkbox"
 ng-model="terms"
 />
 <label for="terms-checkbox">Accept terms and conditions</label>
 </div>

 <div orientation="horizontal" class="field">
 <input
 id="terms-checkbox-2"
 name="terms-checkbox-2"
 type="checkbox"
 ng-model="termsDetails"
 />
 <section>
 <label for="terms-checkbox-2">Accept terms and conditions</label>
 <p>By clicking this checkbox, you agree to the terms.</p>
 </section>
 </div>

 <div orientation="horizontal" class="field">
 <input
 id="toggle-checkbox"
 name="toggle-checkbox"
 type="checkbox"
 disabled
 />
 <label for="toggle-checkbox">Enable notifications</label>
 </div>

 <label>
 <div orientation="horizontal" class="field">
 <input
 id="toggle-checkbox-2"
 name="toggle-checkbox-2"
 type="checkbox"
 ng-model="wrappedNotifications"
 />
 <section>
 <strong>Enable notifications</strong>
 <small>
 You can enable or disable notifications at any time.
 </small>
 </section>
 </div>
 </label>

 <output class="visually-hidden" aria-live="polite">
 Terms {{ terms ? 'accepted' : 'not accepted' }}. Detailed terms {{
 termsDetails ? 'accepted' : 'not accepted' }}. Notifications {{
 wrappedNotifications ? 'enabled' : 'disabled' }}.
 </output>
 </div>
 </body>
</html>

States, group, and RTL

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Checkbox 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="basic=false;described=true;hardDisks=true;externalDisks=true;cds=false;servers=false;rtlTerms=false;rtlDetails=true;rtlNotifications=false"
 data-example="checkbox-basic checkbox-description checkbox-disabled checkbox-group checkbox-invalid checkbox-rtl"
 >
 <main class="checkbox-workflow-grid" aria-label="Checkbox workflows">
 <section
 class="checkbox-workflow"
 aria-labelledby="checkbox-basic-heading"
 >
 <h2 id="checkbox-basic-heading">Basic</h2>
 <div class="checkbox-workflow-narrow field-group">
 <div orientation="horizontal" class="field">
 <input
 id="terms-checkbox-basic"
 name="terms-checkbox-basic"
 type="checkbox"
 ng-model="basic"
 />
 <label for="terms-checkbox-basic"
 >Accept terms and conditions</label
 >
 </div>
 </div>
 </section>

 <section
 class="checkbox-workflow"
 aria-labelledby="checkbox-description-heading"
 >
 <h2 id="checkbox-description-heading">Description</h2>
 <div class="checkbox-workflow-description field-group">
 <div orientation="horizontal" class="field">
 <input
 id="terms-checkbox-desc"
 name="terms-checkbox-desc"
 type="checkbox"
 ng-model="described"
 />
 <section>
 <label for="terms-checkbox-desc"
 >Accept terms and conditions</label
 >
 <p>
 By clicking this checkbox, you agree to the terms and
 conditions.
 </p>
 </section>
 </div>
 </div>
 </section>

 <section
 class="checkbox-workflow"
 aria-labelledby="checkbox-disabled-heading"
 >
 <h2 id="checkbox-disabled-heading">Disabled</h2>
 <div class="checkbox-workflow-narrow field-group">
 <div orientation="horizontal" class="field">
 <input
 id="toggle-checkbox-disabled"
 name="toggle-checkbox-disabled"
 type="checkbox"
 disabled
 />
 <label for="toggle-checkbox-disabled">Enable notifications</label>
 </div>
 </div>
 </section>

 <section
 class="checkbox-workflow"
 aria-labelledby="checkbox-invalid-heading"
 >
 <h2 id="checkbox-invalid-heading">Invalid</h2>
 <div class="checkbox-workflow-narrow field-group">
 <div orientation="horizontal" class="field">
 <input
 id="terms-checkbox-invalid"
 name="terms-checkbox-invalid"
 type="checkbox"
 aria-invalid="true"
 />
 <label for="terms-checkbox-invalid"
 >Accept terms and conditions</label
 >
 </div>
 </div>
 </section>

 <section
 class="checkbox-workflow"
 aria-labelledby="checkbox-group-heading"
 >
 <h2 id="checkbox-group-heading">Group</h2>
 <fieldset class="field-set">
 <legend variant="label">Show these items on the desktop:</legend>
 <p>Select the items you want to show on the desktop.</p>
 <div class="checkbox-preference-group field-group">
 <div orientation="horizontal" class="field">
 <input id="hard-disks" type="checkbox" ng-model="hardDisks" />
 <label for="hard-disks">Hard disks</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="external-disks"
 type="checkbox"
 ng-model="externalDisks"
 />
 <label for="external-disks">External disks</label>
 </div>
 <div orientation="horizontal" class="field">
 <input id="cds-dvds" type="checkbox" ng-model="cds" />
 <label for="cds-dvds">CDs, DVDs, and iPods</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="connected-servers"
 type="checkbox"
 ng-model="servers"
 />
 <label for="connected-servers">Connected servers</label>
 </div>
 </div>
 </fieldset>
 </section>

 <section
 class="checkbox-workflow checkbox-workflow-rtl"
 aria-labelledby="checkbox-rtl-heading"
 dir="rtl"
 lang="ar"
 >
 <h2 id="checkbox-rtl-heading">من اليمين إلى اليسار</h2>
 <div class="field-group">
 <div orientation="horizontal" class="field">
 <input
 id="terms-checkbox-rtl"
 type="checkbox"
 ng-model="rtlTerms"
 />
 <label for="terms-checkbox-rtl">قبول الشروط والأحكام</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="terms-checkbox-2-rtl"
 type="checkbox"
 ng-model="rtlDetails"
 />
 <section>
 <label for="terms-checkbox-2-rtl">قبول الشروط والأحكام</label>
 <p>بالنقر على هذا المربع، فإنك توافق على الشروط.</p>
 </section>
 </div>
 <div orientation="horizontal" class="field">
 <input id="toggle-checkbox-rtl" type="checkbox" disabled />
 <label for="toggle-checkbox-rtl">تفعيل الإشعارات</label>
 </div>
 <label>
 <div orientation="horizontal" class="field">
 <input
 id="toggle-checkbox-2-rtl"
 type="checkbox"
 ng-model="rtlNotifications"
 />
 <section>
 <strong>تفعيل الإشعارات</strong>
 <small>يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.</small>
 </section>
 </div>
 </label>
 </div>
 </section>

 <output class="visually-hidden" aria-live="polite">
 Basic {{ basic }}. Described {{ described }}. Hard disks {{ hardDisks
 }}. External disks {{ externalDisks }}. CDs {{ cds }}. Servers {{
 servers }}.
 </output>
 </main>
 </body>
</html>

Table selection

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Checkbox Compositions</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="selection={allRows:false};rows=[{id:'1',name:'Sarah Chen',email:'sarah.chen@example.com',role:'Admin',selected:true},{id:'2',name:'Marcus Rodriguez',email:'marcus.rodriguez@example.com',role:'User',selected:false},{id:'3',name:'Priya Patel',email:'priya.patel@example.com',role:'User',selected:false},{id:'4',name:'David Kim',email:'david.kim@example.com',role:'Editor',selected:false}]"
 data-example="checkbox-table"
 >
 <main class="checkbox-table-demo" aria-label="Checkbox table composition">
 <figure>
 <table aria-label="Team members">
 <thead>
 <tr>
 <th scope="col" class="checkbox-table-select">
 <input
 id="select-all-checkbox"
 name="select-all-checkbox"
 type="checkbox"
 ng-model="selection.allRows"
 ng-change="rows[0].selected=selection.allRows;rows[1].selected=selection.allRows;rows[2].selected=selection.allRows;rows[3].selected=selection.allRows"
 aria-label="Select all rows"
 />
 </th>
 <th scope="col">Name</th>
 <th scope="col">Email</th>
 <th scope="col">Role</th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="row in rows" aria-selected="{{ row.selected }}">
 <td class="checkbox-table-select">
 <input
 id="row-{{ row.id }}-checkbox"
 name="row-{{ row.id }}-checkbox"
 type="checkbox"
 ng-model="row.selected"
 ng-change="selection.allRows=rows[0].selected && rows[1].selected && rows[2].selected && rows[3].selected"
 aria-label="Select {{ row.name }}"
 />
 </td>
 <td class="checkbox-table-name">{{ row.name }}</td>
 <td>{{ row.email }}</td>
 <td>{{ row.role }}</td>
 </tr>
 </tbody>
 </table>
 </figure>
 <output class="visually-hidden" aria-live="polite">
 Sarah Chen {{ rows[0].selected ? 'selected' : 'not selected' }}. Marcus
 Rodriguez {{ rows[1].selected ? 'selected' : 'not selected' }}. Priya
 Patel {{ rows[2].selected ? 'selected' : 'not selected' }}. David Kim {{
 rows[3].selected ? 'selected' : 'not selected' }}.
 </output>
 </main>
 </body>
</html>

Installation

combobox

Mon, 01 Jan 0001 00:00:00 +0000

Compose a searchable listbox with one ng-combobox root and semantic child elements identified by combobox part classes. AngularTS ng-model, filters, and event expressions remain the source of truth for query and selected-value state. AngularCSS supplies popup disclosure, active-descendant navigation, disabled handling, collision placement, and visual state.

<div
 ng-combobox
 ng-on-angularcss:combobox-select="selected=$event.detail.value; query=selected"
>
 <header>
 <input
 aria-label="Framework"
 ng-model="query"
 placeholder="Select a framework"
 />
 <button type="button" aria-label="Show frameworks" value="toggle"></button>
 </header>
 <aside aria-label="Framework options">
 <p>No items found.</p>
 <div>
 <ul>
 <li
 ng-repeat="framework in frameworks | filter:query"
 data-value="{{ framework }}"
 ng-attr-aria-selected="{{ selected === framework }}"
 >
 {{ framework }}
 </li>
 </ul>
 </div>
 </aside>
</div>

Add auto-highlight when opening or filtering should highlight the first enabled result. Without it, the popup opens without an active option until the user presses an arrow key. Bind angularcss:combobox-open-change when the root uses controlled open="{{ state.open }}" state.

command

Mon, 01 Jan 0001 00:00:00 +0000

Build a searchable command menu with one ng-command root and semantic child elements identified by command part classes. AngularTS owns query filtering and command execution. Command follows the rendered result DOM and supplies listbox relationships, active-descendant navigation, disabled skipping, and scroll-to-active behavior.

<section ng-command variant="surface" aria-label="Command menu">
 <header>
 <label>
 <span aria-hidden="true"><!-- search icon --></span>
 <input
 aria-label="Search commands"
 ng-model="query"
 placeholder="Type a command or search..."
 />
 </label>
 </header>
 <div>
 <p>No results found.</p>
 <section>
 <h2>Suggestions</h2>
 <button
 type="button"
 ng-repeat="command in commands | filter:query"
 ng-click="selected=command.label"
 >
 <span ng-bind="command.label"></span>
 <kbd ng-bind="command.shortcut"></kbd>
 </button>
 </section>
 </div>
</section>

Use aria-disabled="true" or native disabled state for unavailable options. Arrow keys wrap through enabled rendered options; Home and End move to the boundaries; Enter activates the current option through its ordinary click handler. Pointer movement updates the same active state.

context-menu

Mon, 01 Jan 0001 00:00:00 +0000

Use a semantic trigger and content surface. AngularCSS owns right-click and keyboard disclosure, pointer placement, menu focus, and submenu navigation; AngularTS owns actions and checkbox or radio values.

<div ng-context-menu>
 <div>Right click here</div>
 <menu aria-label="Browser actions">
 <button ng-click="reload()">Reload</button>
 <button
 aria-checked="{{ showBookmarks }}"
 ng-click="showBookmarks=!showBookmarks"
 >
 Show Bookmarks Bar
 </button>
 </menu>
</div>

Ordinary click is left to the authored trigger. Right-click, Shift F10, and the Context Menu key open this component.

Basic And Submenu

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 Context Menu</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="lastAction='None'"
 data-example="context-menu-basic context-menu-demo context-menu-submenu"
 >
 <main class="visual-example">
 <div id="context-menu-demo" ng-context-menu>
 <div>Right click here</div>
 <menu aria-label="Browser actions">
 <section>
 <button ng-click="lastAction='Back'">
 Back
 <kbd>Alt+Left</kbd>
 </button>
 <button disabled>
 Forward
 <kbd>Alt+Right</kbd>
 </button>
 <button ng-click="lastAction='Reload'">
 Reload
 <kbd>Ctrl+R</kbd>
 </button>
 </section>
 <hr />
 <section>
 <button ng-click="lastAction='Save'">
 Save
 <kbd>Ctrl+S</kbd>
 </button>
 </section>
 <details>
 <summary>More Tools</summary>
 <menu>
 <section>
 <button ng-click="lastAction='Save Page'">Save Page...</button>
 <button ng-click="lastAction='Create Shortcut'">
 Create Shortcut...
 </button>
 <button ng-click="lastAction='Name Window'">
 Name Window...
 </button>
 </section>
 <hr />
 <button ng-click="lastAction='Developer Tools'">
 Developer Tools
 </button>
 </menu>
 </details>
 <hr />
 <button variant="destructive" ng-click="lastAction='Delete'">
 Delete
 </button>
 </menu>
 </div>
 <output class="context-menu-output" aria-live="polite">
 Last action: <span ng-bind="lastAction"></span>
 </output>
 </main>
 </body>
</html>

Content And State

Icons, destructive actions, groups, shortcuts, checkbox values, and radio values are functional packaged scenarios.

data-table

Mon, 01 Jan 0001 00:00:00 +0000

Compose Table, Filter Bar, Pagination, and native controls around backend-owned rows. AngularCSS supplies the dense workspace presentation while AngularTS owns local bindings and the backend owns data operations.

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 Data Table</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="query=''; order='customer'; page=1; state={loading:false,error:false,stale:true,selected:false,canArchive:false}; rows=[{id:'ORD-1048',customer:'Ada Lovelace',status:'Open',total:'€1,240',selected:false},{id:'ORD-1047',customer:'Grace Hopper',status:'Review',total:'€860',selected:false},{id:'ORD-1046',customer:'Edsger Dijkstra',status:'Complete',total:'€420',selected:false},{id:'ORD-1045',customer:'Margaret Hamilton',status:'Open',total:'€2,100',selected:false}]"
 data-example="data-table-demo"
 >
 <section
 class="data-table visual-example"
 aria-labelledby="orders-title"
 aria-busy="{{ state.loading }}"
 >
 <header>
 <div>
 <h2 id="orders-title">Orders</h2>
 <p>Recent customer orders</p>
 </div>
 <form role="search" aria-label="Filter orders">
 <fieldset>
 <legend class="visually-hidden">Filters</legend>
 <label>
 <span class="visually-hidden">Search orders</span>
 <input
 type="search"
 ng-model="query"
 placeholder="Search orders"
 />
 </label>
 </fieldset>
 </form>
 </header>
 <aside
 variant="warning"
 aria-live="polite"
 ng-if="state.stale && !state.loading && !state.error"
 role="alert"
 >
 <h3>Showing cached orders</h3>
 <p>The latest refresh did not complete. Values may be out of date.</p>
 <button
 size="xs"
 variant="ghost"
 type="button"
 ng-click="state.stale=false"
 >
 Dismiss
 </button>
 </aside>
 <aside
 variant="destructive"
 aria-live="assertive"
 ng-if="state.error"
 role="alert"
 >
 <h3>Orders could not be loaded</h3>
 <p>The service returned an error. Existing filters are preserved.</p>
 <button
 size="xs"
 variant="outline"
 type="button"
 ng-click="state.error=false; state.loading=true"
 >
 Retry
 </button>
 </aside>
 <menu aria-label="Selected order actions" ng-if="state.selected">
 <output>
 <span ng-repeat="row in rows | filter:{selected:true}" ng-show="$last"
 >{{ $index + 1 }}</span
 >
 selected
 </output>
 <button size="sm" variant="outline" type="button">Export</button>
 <button
 size="sm"
 type="button"
 ng-disabled="!state.canArchive"
 aria-describedby="orders-permission-note"
 >
 Archive
 </button>
 </menu>
 <figure>
 <section class="empty" ng-if="state.loading" aria-live="polite">
 <output class="spinner" aria-label="Loading orders"></output>
 <h3>Loading orders</h3>
 <p>Current filters and selection will be preserved.</p>
 </section>
 <table ng-if="!state.loading && !state.error">
 <caption>
 Orders currently available to your account.
 </caption>
 <thead>
 <tr>
 <th scope="col">
 <input
 type="checkbox"
 aria-label="Select all orders"
 ng-model="state.selectAll"
 ng-change="rows[0].selected=state.selectAll; rows[1].selected=state.selectAll; rows[2].selected=state.selectAll; rows[3].selected=state.selectAll; state.selected=state.selectAll"
 />
 </th>
 <th scope="col">
 <button
 variant="ghost"
 ng-click="order=order==='id' ? '-id' : 'id'"
 >
 Order
 </button>
 </th>
 <th scope="col">
 <button
 variant="ghost"
 ng-click="order=order==='customer' ? '-customer' : 'customer'"
 >
 Customer
 </button>
 </th>
 <th scope="col">Status</th>
 <th scope="col">Total</th>
 </tr>
 </thead>
 <tbody>
 <tr
 ng-repeat="row in rows | filter:query | orderBy:order | limitTo:2:(page - 1) * 2"
 aria-selected="{{ row.selected }}"
 >
 <td>
 <input
 type="checkbox"
 aria-label="Select {{ row.id }}"
 ng-model="row.selected"
 ng-change="state.selected=rows[0].selected || rows[1].selected || rows[2].selected || rows[3].selected"
 />
 </td>
 <th scope="row">{{ row.id }}</th>
 <td>{{ row.customer }}</td>
 <td><span class="badge">{{ row.status }}</span></td>
 <td>{{ row.total }}</td>
 </tr>
 </tbody>
 </table>
 <p ng-if="!state.loading && !state.error">No matching orders.</p>
 </figure>
 <footer>
 <div>
 <output
 ><span>0</span
 ><span ng-repeat="row in rows | filter:query" ng-show="$last"
 >{{ $index + 1 }}</span
 >
 orders</output
 >
 <p id="orders-permission-note" ng-if="!state.canArchive">
 Your role can export orders but cannot archive them.
 </p>
 </div>
 <nav class="pagination" aria-label="Order pages">
 <ul>
 <li>
 <a
 href="#page-1"
 ng-click="page=1"
 aria-current="{{ page === 1 ? 'page' : 'false' }}"
 >1</a
 >
 </li>
 <li>
 <a
 href="#page-2"
 ng-click="page=2"
 aria-current="{{ page === 2 ? 'page' : 'false' }}"
 >2</a
 >
 </li>
 </ul>
 </nav>
 </footer>
 </section>
 </body>
</html>

Backend-driven states

The recipe keeps service state in authored HTML so applications can bind it to their own requests and authorization model:

date-picker

Mon, 01 Jan 0001 00:00:00 +0000

Compose Calendar with the native Popover API and an application-owned date value. This recipe packages the existing date workflow without adding another model, parser, or form directive.

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 Date Picker</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="selectedDate='2026-09-05'"
 data-example="date-picker-demo"
 >
 <div class="date-picker visual-example">
 <label for="delivery-date">Delivery date</label>
 <span>
 <button
 id="delivery-date"
 type="button"
 variant="outline"
 popovertarget="delivery-date-calendar"
 >
 <span>{{ selectedDate ? selectedDate : 'Choose a date' }}</span
 ><span aria-hidden="true">▾</span>
 </button>
 <aside
 id="delivery-date-calendar"
 popover
 side="bottom"
 align="start"
 aria-label="Choose delivery date"
 >
 <section
 ng-calendar
 data-calendar-generated
 data-month="2026-09"
 data-value="{{ selectedDate }}"
 ng-on-angularcss:calendar-select="selectedDate=$event.detail.value"
 >
 <header>
 <button
 type="button"
 size="icon"
 variant="ghost"
 aria-label="Previous month"
 >
 ‹
 </button>
 <h2></h2>
 <button
 type="button"
 size="icon"
 variant="ghost"
 aria-label="Next month"
 >
 ›
 </button>
 </header>
 <div></div>
 </section>
 </aside>
 </span>
 <p>The application owns parsing, validation, and the submitted value.</p>
 </div>
 </body>
</html>

Installation

description-list

Mon, 01 Jan 0001 00:00:00 +0000

Use a native description list for stable record labels and values. AngularCSS adds responsive row presentation without changing the relationship between terms and descriptions.

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 Description List</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 data-example="description-list-demo">
 <dl class="visual-example" aria-label="Account details">
 <div>
 <dt>Account owner</dt>
 <dd>Ada Lovelace</dd>
 </div>
 <div>
 <dt>Email</dt>
 <dd>ada@example.com</dd>
 </div>
 <div>
 <dt>Plan</dt>
 <dd>Enterprise</dd>
 </div>
 <div>
 <dt>Last updated</dt>
 <dd><time datetime="2026-09-05">5 September 2026</time></dd>
 </div>
 </dl>
 </body>
</html>

Installation

dialog

Mon, 01 Jan 0001 00:00:00 +0000

Compose a modal from a declarative invoker and native dialog. The browser owns modal focus and disclosure; AngularTS owns form values and application actions.

<section class="dialog">
 <button commandfor="profile-dialog" command="show-modal">Edit profile</button>
 <dialog id="profile-dialog">
 <header>
 <h2>Edit profile</h2>
 <p>Update your public profile.</p>
 </header>
 <button commandfor="profile-dialog" command="close">Save changes</button>
 </dialog>
</section>

Profile Dialog

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 Dialog</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="profile={name:'Pedro Duarte',username:'@peduarte'}; savedName='Pedro Duarte'"
 data-example="dialog-demo"
 >
 <main class="visual-example">
 <section id="profile-dialog" class="dialog">
 <button
 commandfor="profile-dialog-content"
 command="show-modal"
 variant="outline"
 >
 Edit profile
 </button>
 <dialog
 id="profile-dialog-content"
 closedby="any"
 aria-labelledby="profile-dialog-title"
 aria-describedby="profile-dialog-description"
 >
 <header>
 <h2 id="profile-dialog-title">Edit profile</h2>
 <p id="profile-dialog-description">
 Make changes to your profile here. Click save when you're done.
 </p>
 </header>
 <form method="dialog">
 <label for="dialog-name">
 <span>Name</span>
 <input id="dialog-name" ng-model="profile.name" />
 </label>
 <label for="dialog-username">
 <span>Username</span>
 <input id="dialog-username" ng-model="profile.username" />
 </label>
 <footer>
 <button
 type="button"
 commandfor="profile-dialog-content"
 command="close"
 variant="outline"
 >
 Cancel
 </button>
 <button
 type="button"
 commandfor="profile-dialog-content"
 command="close"
 ng-click="savedName=profile.name"
 >
 Save changes
 </button>
 </footer>
 </form>
 <button
 type="button"
 commandfor="profile-dialog-content"
 command="close"
 variant="ghost"
 size="icon-sm"
 >
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="M18 6 6 18"></path>
 <path d="m6 6 12 12"></path>
 </svg>
 <span class="visually-hidden">Close</span>
 </button>
 </dialog>
 </section>
 <output class="dialog-output" aria-live="polite">
 Saved profile: <span ng-bind="savedName"></span>
 </output>
 </main>
 </body>
</html>

Close Controls

Corner and footer close actions are distinct, and the corner control can be omitted without changing modal behavior.

direction

Mon, 01 Jan 0001 00:00:00 +0000

Use the native dir attribute and logical CSS properties on semantic blocks.

<section dir="rtl">
 <p align="start">Logical start aligns for right-to-left.</p>
</section>

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 Direction</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>
 <div class="stack">
 <section id="direction-default" class="card">
 <header>
 <h2>LTR</h2>
 <p align="start">The chevron points forward.</p>
 </header>
 <section class="row">
 <span aria-hidden="true" class="rtl-flip">-&gt;</span>
 <span>Settings</span>
 </section>
 </section>

 <section id="direction-rtl" dir="rtl" lang="ar" class="card">
 <header>
 <h2>RTL</h2>
 <p align="start">
 تتبع المحاذاة المنطقية واتجاه الأيقونة اتجاه المستند.
 </p>
 </header>
 <section class="row" id="direction-nested">
 <span aria-hidden="true" class="rtl-flip">-&gt;</span>
 <span>الإعدادات</span>
 </section>
 </section>
 </div>
 </body>
</html>

Installation

disclosure

Mon, 01 Jan 0001 00:00:00 +0000

Native details and summary own click, keyboard, focus, and disclosure state. AngularCSS only styles the authored structure. AngularTS may observe native events when the application needs the state.

<details class="disclosure">
 <summary>Order details</summary>
 <div>Shipping address and item details.</div>
</details>

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 Disclosure</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 data-example="disclosure-demo">
 <details class="disclosure visual-example">
 <summary>
 <header>
 <h2>Order #4189</h2>
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path d="m7 15 5 5 5-5M7 9l5-5 5 5" />
 </svg>
 <span class="visually-hidden">Toggle details</span>
 </header>
 <p><span>Status</span><strong>Shipped</strong></p>
 </summary>
 <section>
 <article>
 <p><strong>Shipping address</strong></p>
 <p>100 Market St, San Francisco</p>
 </article>
 <article>
 <p><strong>Items</strong></p>
 <p>2x Studio Headphones</p>
 </article>
 </section>
 </details>
 </body>
</html>

Basic, settings, and RTL

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Disclosure 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
 data-example="disclosure-basic disclosure-rtl disclosure-settings"
 >
 <main class="disclosure-workflow-grid" aria-label="Disclosure workflows">
 <section
 class="disclosure-workflow"
 aria-labelledby="disclosure-basic-heading"
 >
 <h2 id="disclosure-basic-heading">Basic</h2>
 <div class="disclosure-basic-card card">
 <section>
 <details class="disclosure disclosure-product">
 <summary>
 <span>Product details</span>
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path d="m6 9 6 6 6-6" />
 </svg>
 </summary>
 <div>
 <p>
 This panel can be expanded or collapsed to reveal additional
 content.
 </p>
 <button size="xs">Learn More</button>
 </div>
 </details>
 </section>
 </div>
 </section>

 <section
 class="disclosure-workflow"
 aria-labelledby="disclosure-settings-heading"
 >
 <h2 id="disclosure-settings-heading">Settings</h2>
 <div size="sm" class="disclosure-settings-card card">
 <header>
 <h2>Radius</h2>
 <p>Set the corner radius of the element.</p>
 </header>
 <section>
 <section class="disclosure-settings">
 <div class="disclosure-settings-fields">
 <label class="visually-hidden" for="radius-x">Radius X</label>
 <input id="radius-x" type="number" value="0" />
 <label class="visually-hidden" for="radius-y">Radius Y</label>
 <input id="radius-y" type="number" value="0" />
 <details class="disclosure disclosure-settings-disclosure">
 <summary aria-label="Toggle additional radius settings">
 <svg
 class="disclosure-maximize"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path
 d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"
 />
 </svg>
 <svg
 class="disclosure-minimize"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path
 d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3m8 0v-3a2 2 0 0 1 2-2h3"
 />
 </svg>
 </summary>
 <div class="disclosure-settings-more">
 <label class="visually-hidden" for="radius-bottom-x"
 >Bottom radius X</label
 >
 <input id="radius-bottom-x" type="number" value="0" />
 <label class="visually-hidden" for="radius-bottom-y"
 >Bottom radius Y</label
 >
 <input id="radius-bottom-y" type="number" value="0" />
 </div>
 </details>
 </div>
 </section>
 </section>
 </div>
 </section>

 <section
 class="disclosure-workflow disclosure-workflow-wide"
 aria-labelledby="disclosure-rtl-heading"
 dir="rtl"
 lang="ar"
 >
 <h2 id="disclosure-rtl-heading">من اليمين إلى اليسار</h2>
 <details class="disclosure">
 <summary>
 <header>
 <h4>الطلب #4189</h4>
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path d="m7 15 5 5 5-5M7 9l5-5 5 5" />
 </svg>
 <span class="visually-hidden">تبديل التفاصيل</span>
 </header>
 <p><span>الحالة</span><strong>تم الشحن</strong></p>
 </summary>
 <section>
 <article>
 <p><strong>عنوان الشحن</strong></p>
 <p>100 Market St, San Francisco</p>
 </article>
 <article>
 <p><strong>العناصر</strong></p>
 <p>2x سماعات الاستوديو</p>
 </article>
 </section>
 </details>
 </section>
 </main>
 </body>
</html>

File tree

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Disclosure Compositions</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 data-example="disclosure-file-tree">
 <main aria-label="Disclosure file tree composition">
 <div size="sm" class="disclosure-file-card visual-example card">
 <header>
 <section ng-tabs>
 <menu aria-label="File views">
 <button aria-selected="true">Explorer</button>
 <button>Outline</button>
 </menu>
 <section>
 <span class="visually-hidden">Explorer file tree</span>
 </section>
 <section>
 <span class="visually-hidden">No outline available</span>
 </section>
 </section>
 </header>
 <section>
 <div class="disclosure-file-tree">
 <details class="disclosure">
 <summary>
 <svg
 class="tree-chevron"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path d="m9 18 6-6-6-6" /></svg
 ><svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"
 /></svg
 ><span>components</span>
 </summary>
 <div>
 <details class="disclosure">
 <summary>
 <svg
 class="tree-chevron"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path d="m9 18 6-6-6-6" /></svg
 ><svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"
 /></svg
 ><span>ui</span>
 </summary>
 <div>
 <button variant="link" size="sm">
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
 />
 <path d="M14 2v6h6" /></svg
 >button.tsx
 </button>
 <button variant="link" size="sm">
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
 />
 <path d="M14 2v6h6" /></svg
 >card.tsx
 </button>
 <button variant="link" size="sm">
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
 />
 <path d="M14 2v6h6" /></svg
 >dialog.tsx
 </button>
 <button variant="link" size="sm">
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
 />
 <path d="M14 2v6h6" /></svg
 >input.tsx
 </button>
 <button variant="link" size="sm">
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
 />
 <path d="M14 2v6h6" /></svg
 >select.tsx
 </button>
 <button variant="link" size="sm">
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
 />
 <path d="M14 2v6h6" /></svg
 >table.tsx
 </button>
 </div>
 </details>
 <button variant="link" size="sm">
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
 />
 <path d="M14 2v6h6" /></svg
 >login-form.tsx
 </button>
 <button variant="link" size="sm">
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
 />
 <path d="M14 2v6h6" /></svg
 >register-form.tsx
 </button>
 </div>
 </details>
 <details class="disclosure">
 <summary>
 <svg
 class="tree-chevron"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path d="m9 18 6-6-6-6" /></svg
 ><svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"
 /></svg
 ><span>lib</span>
 </summary>
 <div>
 <button variant="link" size="sm">utils.ts</button
 ><button variant="link" size="sm">cn.ts</button
 ><button variant="link" size="sm">api.ts</button>
 </div>
 </details>
 <details class="disclosure">
 <summary>
 <svg
 class="tree-chevron"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path d="m9 18 6-6-6-6" /></svg
 ><svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"
 /></svg
 ><span>hooks</span>
 </summary>
 <div>
 <button variant="link" size="sm">use-media-query.ts</button
 ><button variant="link" size="sm">use-debounce.ts</button
 ><button variant="link" size="sm">use-local-storage.ts</button>
 </div>
 </details>
 <details class="disclosure">
 <summary>
 <svg
 class="tree-chevron"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path d="m9 18 6-6-6-6" /></svg
 ><svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"
 /></svg
 ><span>types</span>
 </summary>
 <div>
 <button variant="link" size="sm">index.d.ts</button
 ><button variant="link" size="sm">api.d.ts</button>
 </div>
 </details>
 <details class="disclosure">
 <summary>
 <svg
 class="tree-chevron"
 viewBox="0 0 24 24"
 fill="none"
 aria-hidden="true"
 >
 <path d="m9 18 6-6-6-6" /></svg
 ><svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"
 /></svg
 ><span>public</span>
 </summary>
 <div>
 <button variant="link" size="sm">favicon.ico</button
 ><button variant="link" size="sm">logo.svg</button
 ><button variant="link" size="sm">images</button>
 </div>
 </details>
 <button variant="link" size="sm">app.tsx</button>
 <button variant="link" size="sm">layout.tsx</button>
 <button variant="link" size="sm">globals.css</button>
 <button variant="link" size="sm">package.json</button>
 <button variant="link" size="sm">tsconfig.json</button>
 <button variant="link" size="sm">README.md</button>
 <button variant="link" size="sm">.gitignore</button>
 </div>
 </section>
 </div>
 </main>
 </body>
</html>

Installation

drawer

Mon, 01 Jan 0001 00:00:00 +0000

Drawers are native modal dialogs with CSS edge placement and optional handle, header, scroll body, and footer. AngularTS owns values and actions inside them.

<section class="drawer">
 <button commandfor="goal-drawer" command="show-modal">Open Drawer</button>
 <dialog id="goal-drawer" side="bottom">
 <h2>Move Goal</h2>
 <p>Set your daily activity goal.</p>
 <button commandfor="goal-drawer" command="close">Cancel</button>
 </dialog>
</section>

Activity Goal

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 Drawer</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="goal=350; submittedGoal=350"
 data-example="drawer-demo"
 >
 <main class="visual-example">
 <section id="goal-drawer" class="drawer">
 <button
 commandfor="goal-drawer-content"
 command="show-modal"
 variant="outline"
 >
 Open Drawer
 </button>
 <dialog
 id="goal-drawer-content"
 closedby="any"
 aria-labelledby="goal-drawer-title"
 aria-describedby="goal-drawer-description"
 side="bottom"
 >
 <article>
 <header>
 <h2 id="goal-drawer-title">Move Goal</h2>
 <p id="goal-drawer-description">Set your daily activity goal.</p>
 </header>
 <section>
 <menu>
 <button
 variant="outline"
 size="icon-sm"
 aria-label="Decrease"
 ng-disabled="goal <= 200"
 ng-click="goal=goal-10"
 >
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="M5 12h14"></path>
 </svg>
 </button>
 <output>
 <strong ng-bind="goal"></strong>
 <span>Calories/day</span>
 </output>
 <button
 variant="outline"
 size="icon-sm"
 aria-label="Increase"
 ng-disabled="goal>= 400"
 ng-click="goal=goal+10"
 >
 <svg
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 aria-hidden="true"
 >
 <path d="M12 5v14"></path>
 <path d="M5 12h14"></path>
 </svg>
 </button>
 </menu>
 <figure aria-hidden="true">
 <span style="--height: 80%"></span
 ><span style="--height: 60%"></span>
 <span style="--height: 40%"></span
 ><span style="--height: 60%"></span>
 <span style="--height: 40%"></span
 ><span style="--height: 56%"></span>
 <span style="--height: 38%"></span
 ><span style="--height: 48%"></span>
 <span style="--height: 60%"></span
 ><span style="--height: 40%"></span>
 <span style="--height: 56%"></span
 ><span style="--height: 38%"></span>
 <span style="--height: 70%"></span>
 </figure>
 </section>
 <footer>
 <button
 commandfor="goal-drawer-content"
 command="close"
 ng-click="submittedGoal=goal"
 >
 Submit
 </button>
 <button
 commandfor="goal-drawer-content"
 command="close"
 variant="outline"
 >
 Cancel
 </button>
 </footer>
 </article>
 </dialog>
 </section>
 <output class="drawer-output" aria-live="polite">
 Submitted goal: <span ng-bind="submittedGoal"></span>
 </output>
 </main>
 </body>
</html>

Responsive Dialog

The application chooses Dialog on desktop and Drawer on compact viewports while sharing the same AngularTS form model.

dropdown-menu

Mon, 01 Jan 0001 00:00:00 +0000

Use ng-dropdown-menu on a wrapper with a trigger button and a native menu.

<div ng-dropdown-menu>
 <button type="button">Options</button>
 <menu>
 <a href="#new">New Task</a>
 <a href="#edit">Edit Task</a>
 <a href="#delete">Delete Task</a>
 </menu>
</div>

The directive adds the required menu roles and manages aria-expanded, aria-controls, outside-click close, Escape close, and arrow-key focus movement. It does not publish scope methods or own AngularTS application state. If the menu needs external control, bind the wrapper’s concise open attribute from AngularTS state.

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 Dropdown Menu</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="menuState={toolbar:true,density:'comfortable'}"
 data-example="dropdown-menu-complex dropdown-menu-demo"
 >
 <div ng-dropdown-menu class="visual-example">
 <button type="button">Options</button>
 <menu style="--menu-width: 11rem">
 <section>
 <h3>Project</h3>
 <button>New task <kbd>Ctrl+N</kbd></button>
 <button>Edit task</button>
 </section>
 <hr />
 <button
 aria-checked="{{ menuState.toolbar }}"
 ng-click="menuState.toolbar=!menuState.toolbar"
 >
 Show toolbar
 </button>
 <fieldset aria-label="Density">
 <button
 aria-checked="{{ menuState.density === 'comfortable' }}"
 ng-click="menuState.density='comfortable'"
 >
 Comfortable
 </button>
 <button
 aria-checked="{{ menuState.density === 'compact' }}"
 ng-click="menuState.density='compact'"
 >
 Compact
 </button>
 </fieldset>
 <details>
 <summary>Share</summary>
 <menu>
 <button>Copy link</button>
 <button>Email link</button>
 </menu>
 </details>
 </menu>
 </div>
 </body>
</html>

Reference workflows

The workflow page covers basic and dynamically inserted items, an avatar trigger, AngularTS-owned checkbox and radio state, shortcuts, destructive items, submenus, right-to-left direction, and disabled triggers.

empty

Mon, 01 Jan 0001 00:00:00 +0000

Empty states compose media, title, description, and action content parts.

<section class="empty">
 <header>
 <figure variant="icon"></figure>
 <h2>No projects yet</h2>
 <p>Create your first project.</p>
 </header>
</section>

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 Empty</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 data-example="empty-demo">
 <section class="visual-example empty" aria-live="polite">
 <header>
 <figure variant="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke-width="1.75"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 d="M3.75 9.75h16.5m-13.5 0V6.75A2.25 2.25 0 0 1 9 4.5h6a2.25 2.25 0 0 1 2.25 2.25v3m-12 0 1.2 8.4A2.25 2.25 0 0 0 8.68 20.25h6.64a2.25 2.25 0 0 0 2.23-2.1l1.2-8.4"
 />
 </svg>
 </figure>
 <h2>No Projects Yet</h2>
 <p>
 You haven't created any projects yet. Get started by creating your
 first project.
 </p>
 </header>
 <section>
 <div class="row">
 <button>Create Project</button>
 <button variant="outline">Import Project</button>
 </div>
 </section>
 <a class="empty-learn-more" href="#learn-more">
 Learn More
 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
 <path
 d="M7 17 17 7M7 7h10v10"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
 />
 </svg>
 </a>
 </section>
 </body>
</html>

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 Empty 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="emptyQuery='';emptyAction='Ready'"
 >
 <main class="empty-workflow-grid" aria-label="Empty state workflows">
 <section data-example="empty-avatar" class="empty-workflow empty">
 <header>
 <figure>
 <span class="empty-avatar-large avatar"
 ><img src="../../images/avatars/01.png" alt="Jane Doe" /><span
 >JD</span
 ></span
 >
 </figure>
 <h2>User Offline</h2>
 <p>
 This user is currently offline. Leave a message or try again later.
 </p>
 </header>
 <section>
 <button
 size="sm"
 type="button"
 ng-click="emptyAction='Message queued'"
 >
 Leave Message
 </button>
 </section>
 </section>
 <section data-example="empty-avatar-group" class="empty-workflow empty">
 <header>
 <figure class="empty-avatar-group">
 <span class="avatar"
 ><img src="../../images/avatars/01.png" alt="Jane" /></span
 ><span class="avatar"
 ><img src="../../images/avatars/02.png" alt="Alex" /></span
 ><span class="avatar"
 ><img src="../../images/avatars/03.png" alt="Sam"
 /></span>
 </figure>
 <h2>No Team Members</h2>
 <p>Invite your team to collaborate on this project.</p>
 </header>
 <section>
 <button
 size="sm"
 type="button"
 ng-click="emptyAction='Invite opened'"
 >
 + Invite Members
 </button>
 </section>
 </section>
 <section
 data-example="empty-background"
 class="empty-workflow empty-muted-demo empty"
 >
 <header>
 <figure variant="icon">!</figure>
 <h2>No Notifications</h2>
 <p>You're all caught up. New notifications will appear here.</p>
 </header>
 <section>
 <button
 variant="outline"
 type="button"
 ng-click="emptyAction='Refreshed'"
 >
 Refresh
 </button>
 </section>
 </section>
 <section
 data-example="empty-card"
 class="empty-workflow empty-card-demo empty"
 >
 <header>
 <figure variant="icon">□</figure>
 <h2>No projects yet</h2>
 <p>
 You haven't created any projects yet. Create your first project.
 </p>
 </header>
 <section>
 <div class="row">
 <button type="button" ng-click="emptyAction='Create project'">
 Create project</button
 ><button
 variant="outline"
 type="button"
 ng-click="emptyAction='Import project'"
 >
 Import project
 </button>
 </div>
 <a href="#learn">Learn more</a>
 </section>
 </section>
 <section data-example="empty-input-group" class="empty-workflow empty">
 <header>
 <h2>404 - Not Found</h2>
 <p>The page you're looking for doesn't exist. Try searching below.</p>
 </header>
 <section>
 <div class="input-group">
 <input
 ng-model="emptyQuery"
 placeholder="Try searching for pages..."
 aria-label="Search missing pages"
 />
 <div>⌕</div>
 <div align="inline-end">
 <kbd>/</kbd>
 </div>
 </div>
 <p>Need help? <a href="#support">Contact support</a></p>
 </section>
 </section>
 <section
 data-example="empty-outline"
 class="empty-workflow empty-outline-demo empty"
 >
 <header>
 <figure variant="icon">☁</figure>
 <h2>Cloud Storage Empty</h2>
 <p>Upload files to access them anywhere.</p>
 </header>
 <section>
 <button
 variant="outline"
 size="sm"
 type="button"
 ng-click="emptyAction='Upload opened'"
 >
 Upload Files
 </button>
 </section>
 </section>
 <section
 data-example="empty-rtl"
 class="empty-workflow empty"
 dir="rtl"
 lang="ar"
 >
 <header>
 <figure variant="icon">□</figure>
 <h2>لا توجد مشاريع بعد</h2>
 <p>لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.</p>
 </header>
 <section>
 <div class="row">
 <button type="button" ng-click="emptyAction='إنشاء مشروع'">
 إنشاء مشروع</button
 ><button
 variant="outline"
 type="button"
 ng-click="emptyAction='استيراد مشروع'"
 >
 استيراد مشروع
 </button>
 </div>
 </section>
 </section>
 <output class="empty-workflow-output">
 {{ emptyAction }} · {{ emptyQuery }}
 </output>
 </main>
 </body>
</html>

Installation

field

Mon, 01 Jan 0001 00:00:00 +0000

Use the field wrapper and field parts to define standard form structure.

<div class="field">
 <label for="email">Email</label>
 <input id="email" type="email" placeholder="Email" />
 <p>Use your work email.</p>
</div>

<div class="field">
 <label for="invalid-email">Email</label>
 <input id="invalid-email" aria-invalid="true" />
 <p class="field-error">Enter a valid email.</p>
</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 Field</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="name='Jane Doe'; email=''">
 <form class="stack">
 <fieldset class="field-set">
 <legend>Profile</legend>
 <div class="field-group">
 <div class="field">
 <label for="demo-profile-name">Name</label>
 <input
 id="demo-profile-name"
 aria-describedby="demo-profile-name-description"
 placeholder="Jane Doe"
 ng-model="name"
 />
 <p id="demo-profile-name-description">
 Use your public display name.
 </p>
 </div>
 <div class="field">
 <label for="demo-profile-email"> Email </label>
 <input
 id="demo-profile-email"
 type="email"
 placeholder="Enter an email"
 required
 aria-describedby="demo-profile-email-error"
 ng-model="email"
 />
 <p
 id="demo-profile-email-error"
 ng-show="!email"
 class="field-error"
 >
 Enter a valid email.
 </p>
 </div>
 </div>
 </fieldset>
 <output class="output">
 Preview: <span ng-bind="name"></span>
 <span ng-bind="email ? '(' + email + ')' : '(email required)'"></span>
 </output>
 </form>
 </body>
</html>

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 Field 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="fieldState={username:'',password:'',feedback:'',department:'',hardDisks:true,externalDisks:false,cds:false,servers:false,sync:true,twoFactor:false,plan:'monthly',environment:'kubernetes',minimum:200,maximum:800,street:'',city:'',zip:'',push:true,pushTasks:false,emailTasks:false,profileName:'',message:'Ready',sameAsShipping:true,month:'',year:''}"
 >
 <main class="field-workflow-grid" aria-label="Field workflows">
 <section data-example="field-input" class="field-workflow">
 <fieldset class="field-set">
 <div class="field-group">
 <div class="field">
 <label for="field-username">Username</label
 ><input
 id="field-username"
 ng-model="fieldState.username"
 placeholder="Max Leiter"
 />
 <p>Choose a unique username for your account.</p>
 </div>
 <div class="field">
 <label for="field-password">Password</label>
 <p>Must be at least 8 characters long.</p>
 <input
 id="field-password"
 type="password"
 ng-model="fieldState.password"
 placeholder="••••••••"
 />
 </div>
 </div>
 </fieldset>
 </section>

 <section data-example="field-textarea" class="field-workflow">
 <fieldset class="field-set">
 <div class="field-group">
 <div class="field">
 <label for="field-feedback">Feedback</label
 ><textarea
 id="field-feedback"
 ng-model="fieldState.feedback"
 placeholder="Your feedback helps us improve..."
 rows="4"
 ></textarea>
 <p>Share your thoughts about our service.</p>
 </div>
 </div>
 </fieldset>
 </section>

 <section data-example="field-select" class="field-workflow">
 <div class="field">
 <label for="field-department">Department</label>
 <select id="field-department" ng-model="fieldState.department">
 <option value="">Choose department</option>
 <option>Engineering</option>
 <option>Design</option>
 <option>Marketing</option>
 <option>Sales</option>
 <option>Customer Support</option>
 </select>
 <p>Select your department or area of work.</p>
 </div>
 </section>

 <section data-example="field-checkbox" class="field-workflow">
 <div class="field-group">
 <fieldset class="field-set">
 <legend variant="label">Show these items on the desktop</legend>
 <p>Select the items you want to show on the desktop.</p>
 <div class="field-choice-list checkbox-group">
 <div orientation="horizontal" class="field">
 <input
 id="field-hard-disks"
 type="checkbox"
 ng-model="fieldState.hardDisks"
 /><label for="field-hard-disks">Hard disks</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="field-external-disks"
 type="checkbox"
 ng-model="fieldState.externalDisks"
 /><label for="field-external-disks">External disks</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="field-cds"
 type="checkbox"
 ng-model="fieldState.cds"
 /><label for="field-cds">CDs, DVDs, and iPods</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="field-servers"
 type="checkbox"
 ng-model="fieldState.servers"
 /><label for="field-servers">Connected servers</label>
 </div>
 </div>
 </fieldset>
 <hr />
 <div orientation="horizontal" class="field">
 <input id="field-sync" type="checkbox" ng-model="fieldState.sync" />
 <section>
 <label for="field-sync"
 >Sync Desktop &amp; Documents folders</label
 >
 <p>Access these folders from your other devices.</p>
 </section>
 </div>
 </div>
 </section>

 <section data-example="field-switch" class="field-workflow">
 <div orientation="horizontal" class="field-switch-demo field">
 <label for="field-2fa">Multi-factor authentication</label
 ><input
 role="switch"
 id="field-2fa"
 type="checkbox"
 ng-model="fieldState.twoFactor"
 />
 </div>
 </section>

 <section data-example="field-radio" class="field-workflow">
 <fieldset class="field-set field-choice-list">
 <legend variant="label">Subscription Plan</legend>
 <p>Yearly and lifetime plans offer significant savings.</p>

 <div orientation="horizontal" class="field">
 <input
 id="field-monthly"
 name="field-plan"
 type="radio"
 value="monthly"
 ng-model="fieldState.plan"
 /><label for="field-monthly">Monthly ($9.99/month)</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="field-yearly"
 name="field-plan"
 type="radio"
 value="yearly"
 ng-model="fieldState.plan"
 /><label for="field-yearly">Yearly ($99.99/year)</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="field-lifetime"
 name="field-plan"
 type="radio"
 value="lifetime"
 ng-model="fieldState.plan"
 /><label for="field-lifetime">Lifetime ($299.99)</label>
 </div>
 </fieldset>
 </section>

 <section data-example="field-slider" class="field-workflow">
 <div class="field">
 <strong>Price Range</strong>
 <p>
 Set your budget range (${{ fieldState.minimum }} - ${{
 fieldState.maximum }}).
 </p>
 <div
 ng-range-slider
 min="0"
 max="1000"
 aria-label="Price Range"
 class="field-slider-demo"
 >
 <input
 type="range"
 min="0"
 max="1000"
 step="10"
 ng-model="fieldState.minimum"
 aria-label="Minimum budget"
 /><input
 type="range"
 min="0"
 max="1000"
 step="10"
 ng-model="fieldState.maximum"
 aria-label="Maximum budget"
 />
 </div>
 </div>
 </section>

 <section data-example="field-choice-card" class="field-workflow">
 <div class="field-group">
 <fieldset class="field-set field-card-list">
 <legend variant="label">Compute Environment</legend>
 <p>Select the compute environment for your cluster.</p>

 <label for="field-kubernetes"
 ><div orientation="horizontal" class="field">
 <section>
 <strong>Kubernetes</strong>
 <p>Run GPU workloads on a K8s cluster.</p>
 </section>
 <input
 id="field-kubernetes"
 name="environment"
 type="radio"
 value="kubernetes"
 ng-model="fieldState.environment"
 /></div></label
 ><label for="field-vm"
 ><div orientation="horizontal" class="field">
 <section>
 <strong>Virtual Machine</strong>
 <p>Access a cluster to run GPU workloads.</p>
 </section>
 <input
 id="field-vm"
 name="environment"
 type="radio"
 value="vm"
 ng-model="fieldState.environment"
 /></div
 ></label>
 </fieldset>
 </div>
 </section>

 <section data-example="field-fieldset" class="field-workflow">
 <fieldset class="field-set">
 <legend>Address Information</legend>
 <p>We need your address to deliver your order.</p>
 <div class="field-group">
 <div class="field">
 <label for="field-street">Street Address</label
 ><input
 id="field-street"
 ng-model="fieldState.street"
 placeholder="123 Main St"
 />
 </div>
 <div class="field-two-column">
 <div class="field">
 <label for="field-city">City</label
 ><input
 id="field-city"
 ng-model="fieldState.city"
 placeholder="New York"
 />
 </div>
 <div class="field">
 <label for="field-zip">Postal Code</label
 ><input
 id="field-zip"
 ng-model="fieldState.zip"
 placeholder="90502"
 />
 </div>
 </div>
 </div>
 </fieldset>
 </section>

 <section data-example="field-group" class="field-workflow">
 <div class="field-group">
 <fieldset class="field-set">
 <label>Responses</label>
 <p>
 Get notified when ChatGPT responds to requests that take time.
 </p>
 <div orientation="horizontal" class="field">
 <input
 id="field-push"
 type="checkbox"
 ng-model="fieldState.push"
 disabled
 /><label for="field-push">Push notifications</label>
 </div>
 </fieldset>
 <hr />
 <fieldset class="field-set">
 <label>Tasks</label>
 <p>
 Get notified when tasks have updates.
 <a href="#tasks">Manage tasks</a>
 </p>
 <div class="field-choice-list">
 <div orientation="horizontal" class="field">
 <input
 id="field-push-tasks"
 type="checkbox"
 ng-model="fieldState.pushTasks"
 /><label for="field-push-tasks">Push notifications</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="field-email-tasks"
 type="checkbox"
 ng-model="fieldState.emailTasks"
 /><label for="field-email-tasks">Email notifications</label>
 </div>
 </div>
 </fieldset>
 </div>
 </section>

 <section
 data-example="field-responsive"
 class="field-workflow field-workflow-wide"
 >
 <form
 ng-submit="fieldState.message='Profile submitted '+fieldState.profileName"
 >
 <fieldset class="field-set">
 <legend>Profile</legend>
 <p>Fill in your profile information.</p>
 <div class="field-group">
 <div orientation="responsive" class="field">
 <section>
 <label for="field-profile-name">Name</label>
 <p>Provide your full name for identification</p>
 </section>
 <input
 id="field-profile-name"
 ng-model="fieldState.profileName"
 placeholder="Evil Rabbit"
 required
 />
 </div>
 <div orientation="responsive" class="field-form-actions field">
 <button type="submit">Submit</button
 ><button
 type="button"
 variant="outline"
 ng-click="fieldState.message='Cancelled'"
 >
 Cancel
 </button>
 </div>
 </div>
 </fieldset>
 </form>
 </section>

 <section
 data-example="field-demo"
 class="field-workflow field-workflow-wide"
 >
 <form ng-submit="fieldState.message='Payment submitted'">
 <div class="field-group">
 <fieldset class="field-set">
 <legend>Payment Method</legend>
 <p>All transactions are secure and encrypted</p>
 <div class="field-group">
 <div class="field">
 <label for="field-card-name">Name on Card</label
 ><input
 id="field-card-name"
 placeholder="Evil Rabbit"
 required
 />
 </div>
 <div class="field">
 <label for="field-card-number">Card Number</label
 ><input
 id="field-card-number"
 placeholder="1234 5678 9012 3456"
 required
 />
 <p>Enter your 16-digit card number</p>
 </div>
 <div class="field-three-column">
 <div class="field">
 <label for="field-month">Month</label
 ><input id="field-month" placeholder="MM" />
 </div>
 <div class="field">
 <label for="field-year">Year</label
 ><input id="field-year" placeholder="YYYY" />
 </div>
 <div class="field">
 <label for="field-cvv">CVV</label
 ><input id="field-cvv" placeholder="123" required />
 </div>
 </div>
 </div>
 </fieldset>
 <hr />
 <fieldset class="field-set">
 <legend>Billing Address</legend>
 <p>The billing address associated with your payment method</p>
 <div orientation="horizontal" class="field">
 <input
 id="field-same-shipping"
 type="checkbox"
 ng-model="fieldState.sameAsShipping"
 /><label for="field-same-shipping"
 >Same as shipping address</label
 >
 </div>
 </fieldset>
 <fieldset class="field-set">
 <div class="field">
 <label for="field-comments">Comments</label
 ><textarea
 id="field-comments"
 placeholder="Add any additional comments"
 ></textarea>
 </div>
 </fieldset>
 <div orientation="horizontal" class="field-form-actions field">
 <button type="submit">Submit</button
 ><button type="button" variant="outline">Cancel</button>
 </div>
 </div>
 </form>
 </section>

 <section
 data-example="field-rtl"
 class="field-workflow field-workflow-wide"
 dir="rtl"
 lang="ar"
 >
 <form>
 <div class="field-group">
 <fieldset class="field-set">
 <legend>طريقة الدفع</legend>
 <p>جميع المعاملات آمنة ومشفرة</p>
 <div class="field-group">
 <div class="field">
 <label for="field-card-name-rtl">الاسم على البطاقة</label
 ><input id="field-card-name-rtl" placeholder="Evil Rabbit" />
 </div>
 <div class="field">
 <label for="field-card-number-rtl">رقم البطاقة</label
 ><input
 id="field-card-number-rtl"
 placeholder="1234 5678 9012 3456"
 />
 <p>أدخل رقم البطاقة المكون من 16 رقمًا</p>
 </div>
 <div class="field-three-column">
 <div class="field">
 <label>الشهر</label><input placeholder="ش.ش" />
 </div>
 <div class="field">
 <label>السنة</label><input placeholder="YYYY" />
 </div>
 <div class="field">
 <label>CVV</label><input placeholder="123" />
 </div>
 </div>
 </div>
 </fieldset>
 <hr />
 <div orientation="horizontal" class="field">
 <input
 id="field-same-shipping-rtl"
 type="checkbox"
 checked
 /><label for="field-same-shipping-rtl">نفس عنوان الشحن</label>
 </div>
 <div class="field">
 <label for="field-comments-rtl">تعليقات</label
 ><textarea
 id="field-comments-rtl"
 placeholder="أضف أي تعليقات إضافية"
 ></textarea>
 </div>
 <div orientation="horizontal" class="field-form-actions field">
 <button type="button">إرسال</button
 ><button type="button" variant="outline">إلغاء</button>
 </div>
 </div>
 </form>
 </section>
 <output class="field-workflow-output"> {{ fieldState.message }} </output>
 </main>
 </body>
</html>

Validation States

Fields derive presentation from native validity and aria-invalid; AngularTS structural directives may insert or remove controls and descriptions.

file-upload

Mon, 01 Jan 0001 00:00:00 +0000

Keep file selection native and present application-owned queue and progress state beside it. AngularTS can handle drop events and backend transfer commands without introducing a second upload model.

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 File Upload</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 data-example="file-upload-demo">
 <section class="visual-example" aria-labelledby="upload-title">
 <header>
 <h2 id="upload-title">Supporting documents</h2>
 <p>PDF, PNG, or JPG files up to 10 MB.</p>
 </header>
 <label for="supporting-files">
 <strong>Choose files or drop them here</strong>
 <span>The application validates and transfers selected files.</span>
 <input
 id="supporting-files"
 type="file"
 accept=".pdf,image/png,image/jpeg"
 multiple
 />
 </label>
 <ul aria-label="Upload queue">
 <li>
 <span>contract.pdf</span>
 <output>72%</output>
 <progress value="72" max="100">72%</progress>
 </li>
 </ul>
 <output aria-live="polite">1 file ready for processing</output>
 </section>
 </body>
</html>

Installation

filter-bar

Mon, 01 Jan 0001 00:00:00 +0000

Use a native form to collect a data view’s search and filter values. Submit, reset, AngularTS binding, and backend queries keep their existing ownership.

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 Filter Bar</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 data-example="filter-bar-demo">
 <main class="visual-example">
 <form role="search" aria-label="Filter orders">
 <fieldset>
 <legend class="visually-hidden">Order filters</legend>
 <label>
 Search
 <input type="search" name="query" placeholder="Order or customer" />
 </label>
 <label>
 Status
 <select name="status">
 <option value="">All statuses</option>
 <option>Open</option>
 <option>Complete</option>
 </select>
 </label>
 </fieldset>
 <menu>
 <button variant="outline" type="reset">Reset</button>
 <button type="submit">Apply</button>
 </menu>
 </form>
 </main>
 </body>
</html>

Installation

form-layout

Mon, 01 Jan 0001 00:00:00 +0000

Arrange native fieldsets and existing Field patterns into responsive columns. Native validation and AngularTS forms remain the authoritative form model.

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 Form Layout</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 data-example="form-layout-demo">
 <form
 class="form-layout visual-example"
 name="customerForm"
 novalidate
 ng-submit="saved=customerForm.valid"
 >
 <header>
 <h2>Create customer</h2>
 <p>Fields marked as required must be completed.</p>
 </header>
 <aside
 role="alert"
 ng-if="customerForm.submitted && customerForm.invalid"
 >
 <header><h3>Check the customer details</h3></header>
 <ul>
 <li><a href="#form-layout-name">Enter a customer name.</a></li>
 </ul>
 </aside>
 <fieldset>
 <legend>Customer details</legend>
 <div class="field">
 <label for="form-layout-name">Customer name</label>
 <input
 id="form-layout-name"
 name="customerName"
 required
 ng-model="customer.name"
 />
 </div>
 <div class="field">
 <label for="form-layout-email">Email</label>
 <input
 id="form-layout-email"
 type="email"
 name="email"
 ng-model="customer.email"
 />
 </div>
 <div class="field">
 <label for="form-layout-region">Region</label>
 <select
 id="form-layout-region"
 name="region"
 ng-model="customer.region"
 >
 <option value="">Choose a region</option>
 <option>Europe</option>
 <option>Americas</option>
 </select>
 </div>
 <div class="field">
 <label for="form-layout-reference">Reference</label>
 <input
 id="form-layout-reference"
 name="reference"
 ng-model="customer.reference"
 />
 </div>
 </fieldset>
 <footer>
 <button variant="outline" type="reset">Cancel</button>
 <button type="submit">Create customer</button>
 </footer>
 <output aria-live="polite" ng-if="saved"
 >Customer is ready to save.</output
 >
 </form>
 </body>
</html>

Installation

hover-card

Mon, 01 Jan 0001 00:00:00 +0000

Use ng-hover-card with a keyboard-focusable trigger and preview content. Pointer disclosure honors optional open-delay and close-delay values in milliseconds. Set side on the content to left, top, bottom, or right.

<span ng-hover-card open-delay="100" close-delay="100">
 <a href="#">@angularcss</a>
 <aside side="bottom">Preview</aside>
</span>

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 Hover Card</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 data-example="hover-card-demo">
 <main class="visual-example">
 <span ng-hover-card open-delay="10" close-delay="100">
 <button type="button" variant="link">Hover Here</button>
 <aside>
 <h3>@nextjs</h3>
 <p>The React Framework - created and maintained by @vercel.</p>
 <footer>Joined December 2021</footer>
 </aside>
 </span>
 </main>
 </body>
</html>

Physical sides

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Hover Card 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 data-example="hover-card-sides">
 <main class="hover-card-workflow">
 <header class="hover-card-workflow-header">
 <h2>Physical sides</h2>
 </header>
 <div class="hover-card-side-grid">
 <section class="hover-card-stage hover-card-stage-left">
 <span ng-hover-card open-delay="20" close-delay="100">
 <button type="button" variant="outline">Left</button>
 <aside side="left">
 <h3>Hover Card</h3>
 <p>This hover card appears on the left side of the trigger.</p>
 </aside>
 </span>
 </section>

 <section class="hover-card-stage hover-card-stage-top">
 <span ng-hover-card open-delay="20" close-delay="100">
 <button type="button" variant="outline">Top</button>
 <aside side="top">
 <h3>Hover Card</h3>
 <p>This hover card appears on the top side of the trigger.</p>
 </aside>
 </span>
 </section>

 <section class="hover-card-stage hover-card-stage-bottom">
 <span ng-hover-card open-delay="20" close-delay="100">
 <button type="button" variant="outline">Bottom</button>
 <aside side="bottom">
 <h3>Hover Card</h3>
 <p>This hover card appears on the bottom side of the trigger.</p>
 </aside>
 </span>
 </section>

 <section class="hover-card-stage hover-card-stage-right">
 <span ng-hover-card open-delay="20" close-delay="100">
 <button type="button" variant="outline">Right</button>
 <aside side="right">
 <h3>Hover Card</h3>
 <p>This hover card appears on the right side of the trigger.</p>
 </aside>
 </span>
 </section>
 </div>

 <footer class="hover-card-disabled-example">
 <span ng-hover-card open-delay="0" close-delay="0">
 <button type="button" variant="outline" disabled>Disabled</button>
 <aside>
 <p>Unavailable preview</p>
 </aside>
 </span>
 </footer>
 </main>
 </body>
</html>

Right-to-left

Physical left and right placement stays physical while text direction and content alignment follow the nearest authored dir attribute.

input

Mon, 01 Jan 0001 00:00:00 +0000

Use a native input. AngularCSS styles data-entry input types directly, while the browser and AngularTS own values, events, validation, required state, disabled state, and form behavior.

<input placeholder="Jane Doe" /> <input placeholder="Disabled" disabled />

Use the native size attribute when a compact control should size to its content. The control retains a max-width of 100%; browsers without field-sizing use the requested number of visible characters.

<input value="Compact" size="7" />

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 Input</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="search=''; status=''">
 <div class="stack">
 <label for="docs-input-search">Search</label>
 <input id="docs-input-search" placeholder="Search" ng-model="search" />
 <output class="output"> Value: {{ search ? search : "empty" }} </output>

 <label for="docs-input-compact">Content-sized</label>
 <input id="docs-input-compact" value="Compact" size="7" />

 <label for="docs-input-disabled">Disabled</label>
 <input id="docs-input-disabled" placeholder="Disabled" disabled />

 <label for="docs-input-invalid">Invalid</label>
 <input
 id="docs-input-invalid"
 placeholder="Invalid"
 aria-invalid="true"
 />

 <label for="docs-input-file">File</label>
 <input id="docs-input-file" type="file" />
 </div>
 </body>
</html>

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 Input 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="inputState={basic:'',apiKey:'',username:'',name:'',email:'',firstName:'',lastName:'',search:'',website:'',required:'',country:'us',formName:'',formEmail:'',phone:'',address:'',message:'Ready'}"
 >
 <main class="input-workflow-grid" aria-label="Input workflows">
 <section data-example="input-basic" class="input-workflow">
 <input
 ng-model="inputState.basic"
 placeholder="Enter text"
 aria-label="Basic input"
 />
 </section>

 <section data-example="input-demo" class="input-workflow">
 <div class="field">
 <label for="input-demo-api-key">API Key</label>
 <input
 id="input-demo-api-key"
 type="password"
 ng-model="inputState.apiKey"
 placeholder="sk-..."
 />
 <p>Your API key is encrypted and stored securely.</p>
 </div>
 </section>

 <section data-example="input-disabled" class="input-workflow">
 <div class="field">
 <label for="input-demo-disabled">Email</label>
 <input
 id="input-demo-disabled"
 type="email"
 placeholder="Email"
 disabled
 />
 <p>This field is currently disabled.</p>
 </div>
 </section>

 <section data-example="input-invalid" class="input-workflow">
 <div class="field">
 <label for="input-invalid-workflow">Invalid Input</label>
 <input
 id="input-invalid-workflow"
 placeholder="Error"
 aria-invalid="true"
 />
 <p>This field contains validation errors.</p>
 </div>
 </section>

 <section data-example="input-required" class="input-workflow">
 <div class="field">
 <label for="input-required-workflow"
 >Required Field <span class="input-required-mark">*</span></label
 >
 <input
 id="input-required-workflow"
 ng-model="inputState.required"
 placeholder="This field is required"
 required
 />
 <p>This field must be filled out.</p>
 </div>
 </section>

 <section data-example="input-file" class="input-workflow">
 <div class="field">
 <label for="input-picture">Picture</label>
 <input id="input-picture" type="file" />
 <p>Select a picture to upload.</p>
 </div>
 </section>

 <section data-example="input-field" class="input-workflow">
 <div class="field">
 <label for="input-field-username">Username</label>
 <input
 id="input-field-username"
 ng-model="inputState.username"
 placeholder="Enter your username"
 />
 <p>Choose a unique username for your account.</p>
 </div>
 </section>

 <section data-example="input-badge" class="input-workflow">
 <div class="field">
 <label for="input-webhook"
 >Webhook URL
 <span variant="secondary" class="input-label-badge badge"
 >Beta</span
 ></label
 >
 <input
 id="input-webhook"
 type="url"
 placeholder="https://api.example.com/webhook"
 />
 </div>
 </section>

 <section
 data-example="input-grid"
 class="input-workflow input-workflow-wide"
 >
 <div class="input-name-grid field-group">
 <div class="field">
 <label for="input-first-name">First Name</label
 ><input
 id="input-first-name"
 ng-model="inputState.firstName"
 placeholder="Jordan"
 />
 </div>
 <div class="field">
 <label for="input-last-name">Last Name</label
 ><input
 id="input-last-name"
 ng-model="inputState.lastName"
 placeholder="Lee"
 />
 </div>
 </div>
 </section>

 <section
 data-example="input-inline"
 class="input-workflow input-workflow-wide"
 >
 <div orientation="horizontal" class="input-inline-demo field">
 <input
 type="search"
 ng-model="inputState.search"
 placeholder="Search..."
 aria-label="Inline search"
 />
 <button
 type="button"
 ng-click="inputState.message='Search '+inputState.search"
 >
 Search
 </button>
 </div>
 </section>

 <section data-example="input-button-group" class="input-workflow">
 <div class="field">
 <label for="input-button-group-workflow">Search</label>
 <div role="group">
 <input
 id="input-button-group-workflow"
 placeholder="Type to search..."
 /><button
 variant="outline"
 type="button"
 ng-click="inputState.message='Button group search'"
 >
 Search
 </button>
 </div>
 </div>
 </section>

 <section data-example="input-input-group" class="input-workflow">
 <div class="field">
 <label for="input-group-url">Website URL</label>
 <div class="input-group">
 <input
 id="input-group-url"
 ng-model="inputState.website"
 placeholder="example.com"
 />
 <div>https://</div>
 <div align="inline-end" aria-label="Website URL information">ⓘ</div>
 </div>
 </div>
 </section>

 <form
 data-example="input-fieldgroup"
 class="input-workflow input-workflow-form"
 ng-submit="inputState.message='Submitted '+inputState.name"
 >
 <div class="field-group">
 <div class="field">
 <label for="fieldgroup-name">Name</label
 ><input
 id="fieldgroup-name"
 ng-model="inputState.name"
 placeholder="Jordan Lee"
 />
 </div>
 <div class="field">
 <label for="fieldgroup-email">Email</label
 ><input
 id="fieldgroup-email"
 type="email"
 ng-model="inputState.email"
 placeholder="name@example.com"
 />
 <p>We'll send updates to this address.</p>
 </div>
 <div orientation="horizontal" class="input-form-actions field">
 <button
 type="reset"
 variant="outline"
 ng-click="inputState.name='';inputState.email=''"
 >
 Reset</button
 ><button type="submit">Submit</button>
 </div>
 </div>
 </form>

 <form
 data-example="input-form"
 class="input-workflow input-workflow-form input-workflow-form-large"
 ng-submit="inputState.message='Contact submitted '+inputState.formName"
 >
 <div class="field-group">
 <div class="field">
 <label for="form-name">Name</label
 ><input
 id="form-name"
 ng-model="inputState.formName"
 placeholder="Evil Rabbit"
 required
 />
 </div>
 <div class="field">
 <label for="form-email">Email</label
 ><input
 id="form-email"
 type="email"
 ng-model="inputState.formEmail"
 placeholder="john@example.com"
 />
 <p>We'll never share your email with anyone.</p>
 </div>
 <div class="input-name-grid">
 <div class="field">
 <label for="form-phone">Phone</label
 ><input
 id="form-phone"
 type="tel"
 ng-model="inputState.phone"
 placeholder="+1 (555) 123-4567"
 />
 </div>
 <div class="field">
 <label for="form-country">Country</label>
 <select id="form-country" ng-model="inputState.country">
 <option value="us">United States</option>
 <option value="uk">United Kingdom</option>
 <option value="ca">Canada</option>
 </select>
 </div>
 </div>
 <div class="field">
 <label for="form-address">Address</label
 ><input
 id="form-address"
 ng-model="inputState.address"
 placeholder="123 Main St"
 />
 </div>
 <div orientation="horizontal" class="input-form-actions field">
 <button
 type="button"
 variant="outline"
 ng-click="inputState.message='Cancelled'"
 >
 Cancel</button
 ><button type="submit">Submit</button>
 </div>
 </div>
 </form>

 <section
 data-example="input-rtl"
 class="input-workflow"
 dir="rtl"
 lang="ar"
 >
 <div class="field">
 <label for="input-rtl-api-key">مفتاح API</label
 ><input
 id="input-rtl-api-key"
 type="password"
 dir="rtl"
 placeholder="sk-..."
 />
 <p>مفتاح API الخاص بك مشفر ومخزن بأمان.</p>
 </div>
 </section>

 <output class="input-workflow-output"> {{ inputState.message }} </output>
 </main>
 </body>
</html>

Installation

input-group

Mon, 01 Jan 0001 00:00:00 +0000

Use .input-group with one native control and optional authored addons, text, and buttons. AngularTS continues to own the model and actions.

<div class="input-group">
 <input id="search" placeholder="Search" />
 <label for="search" align="inline-start">Search</label>
 <div align="inline-end">⌘K</div>
</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 Input Group</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>
 <main class="stack">
 <div class="field">
 <label for="search">Search</label>
 <div class="input-group">
 <input id="search" placeholder="Search documentation..." />
 <label for="search" align="inline-start">
 <span aria-hidden="true">⌕</span>
 </label>
 </div>
 </div>
 </main>
 </body>
</html>

Reference Workflows

These packaged examples cover default, disabled, invalid, inline, text, icon, keyboard-hint, label, Button Group, and Card compositions.

input-otp

Mon, 01 Jan 0001 00:00:00 +0000

Use one native input. The browser owns editing, paste, autofill, and validation.

<label for="code">One-time code</label>
<input
 id="code"
 autocomplete="one-time-code"
 inputmode="numeric"
 pattern="[0-9]{6}"
 maxlength="6"
 ng-model="code"
/>

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 Input Otp</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="otp='123456'"
 data-example="input-otp-demo"
 >
 <div class="stack-sm">
 <label for="one-time-code">One-time code</label>
 <input
 id="one-time-code"
 class="visual-example"
 name="one-time-code"
 inputmode="numeric"
 autocomplete="one-time-code"
 pattern="[0-9]{6}"
 minlength="6"
 maxlength="6"
 size="6"
 ng-model="otp"
 required
 />
 <output class="visually-hidden" aria-live="polite">
 Code: {{ otp }}
 </output>
 </div>
 </body>
</html>

Installation

item

Mon, 01 Jan 0001 00:00:00 +0000

Items compose media, content, title, description, and actions.

<div variant="outline" class="item">
 <section>
 <h3>Item title</h3>
 <p>Supporting description.</p>
 </section>
</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 Item</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>
 <ul style="max-width: 32rem">
 <li variant="outline" id="outline-item" class="item">
 <figure variant="icon">
 <svg
 xmlns="http://www.w3.org/2000/svg"
 fill="none"
 viewBox="0 0 24 24"
 stroke-width="1.75"
 stroke="currentColor"
 >
 <path
 stroke-linecap="round"
 stroke-linejoin="round"
 d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
 />
 </svg>
 </figure>
 <section>
 <h3>Profile verified</h3>
 <p>Your public display name and email have been confirmed.</p>
 </section>
 <menu>
 <button variant="outline" size="sm">Review</button>
 </menu>
 </li>
 <li variant="muted" size="sm" id="compact-item" class="item">
 <section>
 <h3>Scheduled reports</h3>
 <p>Weekly snapshots are ready for your team.</p>
 </section>
 <menu>
 <span variant="secondary" class="badge">New</span>
 </menu>
 </li>
 <li aria-disabled="true" id="disabled-item" class="item">
 <section>
 <h3>Archived workspace</h3>
 <p>This workspace is retained for audit history.</p>
 </section>
 <menu>
 <button variant="outline" size="sm" disabled>Restore</button>
 </menu>
 </li>
 </ul>
 </body>
</html>

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 Item 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="itemState={message:'Ready'}">
 <main class="item-workflow-grid" aria-label="Item workflows">
 <section data-example="item-demo" class="item-workflow">
 <ul>
 <li variant="outline" class="item">
 <section>
 <h3>Basic Item</h3>
 <p>A simple item with title and description.</p>
 </section>
 <menu>
 <button
 variant="outline"
 size="sm"
 type="button"
 ng-click="itemState.message='Basic action'"
 >
 Action
 </button>
 </menu>
 </li>
 <li variant="outline" size="sm" href="#verified" class="item">
 <figure>
 <svg viewBox="0 0 24 24" aria-hidden="true">
 <path d="M9 12.75 11.25 15 15 9.75"></path>
 <circle cx="12" cy="12" r="9"></circle>
 </svg>
 </figure>
 <section>
 <h3>Your profile has been verified.</h3>
 </section>
 <menu aria-hidden="true">›</menu>
 </li>
 </ul>
 </section>

 <section data-example="item-avatar" class="item-workflow">
 <ul>
 <li variant="outline" class="item">
 <figure>
 <span class="item-avatar-large avatar"
 ><img src="../../images/avatars/01.png" alt="Evil Rabbit"
 /></span>
 </figure>
 <section>
 <h3>Evil Rabbit</h3>
 <p>Last seen 5 months ago</p>
 </section>
 <menu>
 <button
 variant="outline"
 size="icon-sm"
 type="button"
 aria-label="Invite Evil Rabbit"
 >
 +
 </button>
 </menu>
 </li>
 <li variant="outline" class="item">
 <figure class="item-avatar-stack">
 <span class="avatar"
 ><img
 src="../../images/avatars/02.png"
 alt="Jordan Lee" /></span
 ><span class="avatar"
 ><img src="../../images/avatars/03.png" alt="maxleiter" /></span
 ><span class="avatar"
 ><img src="../../images/avatars/01.png" alt="evilrabbit"
 /></span>
 </figure>
 <section>
 <h3>No Team Members</h3>
 <p>Invite your team to collaborate on this project.</p>
 </section>
 <menu>
 <button
 variant="outline"
 size="sm"
 type="button"
 ng-click="itemState.message='Invite opened'"
 >
 Invite
 </button>
 </menu>
 </li>
 </ul>
 </section>

 <section data-example="item-icon" class="item-workflow">
 <article variant="outline" class="item">
 <figure variant="icon">
 <svg viewBox="0 0 24 24" aria-hidden="true">
 <path
 d="M12 9v4m0 4h.01M10.3 3.7 2.5 17.2A2 2 0 0 0 4.2 20h15.6a2 2 0 0 0 1.7-2.8L13.7 3.7a2 2 0 0 0-3.4 0Z"
 ></path>
 </svg>
 </figure>
 <section>
 <h3>Security Alert</h3>
 <p>New login detected from unknown device.</p>
 </section>
 <menu>
 <button variant="outline" size="sm" type="button">Review</button>
 </menu>
 </article>
 </section>

 <section data-example="item-image" class="item-workflow">
 <ul>
 <li variant="outline" href="#midnight" class="item">
 <figure variant="image">
 <img
 src="../../images/avatars/01.png"
 alt="Midnight City Lights"
 />
 </figure>
 <section>
 <h3>Midnight City Lights - Electric Nights</h3>
 <p>Neon Dreams</p>
 </section>
 <section>
 <p>3:45</p>
 </section>
 </li>
 <li variant="outline" href="#coffee" class="item">
 <figure variant="image">
 <img
 src="../../images/avatars/02.png"
 alt="Coffee Shop Conversations"
 />
 </figure>
 <section>
 <h3>Coffee Shop Conversations - Urban Stories</h3>
 <p>The Morning Brew</p>
 </section>
 <section>
 <p>4:05</p>
 </section>
 </li>
 <li variant="outline" href="#digital" class="item">
 <figure variant="image">
 <img src="../../images/avatars/03.png" alt="Digital Rain" />
 </figure>
 <section>
 <h3>Digital Rain - Binary Beats</h3>
 <p>Cyber Symphony</p>
 </section>
 <section>
 <p>3:30</p>
 </section>
 </li>
 </ul>
 </section>

 <section
 data-example="item-dropdown"
 class="item-workflow item-dropdown-workflow"
 >
 <div ng-dropdown-menu>
 <button variant="outline" type="button">
 Select <span aria-hidden="true">⌄</span>
 </button>
 <menu>
 <section>
 <button ng-click="itemState.message='Selected Jordan Lee'">
 <article size="xs" class="item">
 <figure>
 <span class="avatar"
 ><img src="../../images/avatars/02.png" alt=""
 /></span>
 </figure>
 <section>
 <h3>Jordan Lee</h3>
 <p>jordan@example.com</p>
 </section>
 </article></button
 ><button ng-click="itemState.message='Selected maxleiter'">
 <article size="xs" class="item">
 <figure>
 <span class="avatar"
 ><img src="../../images/avatars/03.png" alt=""
 /></span>
 </figure>
 <section>
 <h3>maxleiter</h3>
 <p>maxleiter@vercel.com</p>
 </section>
 </article></button
 ><button ng-click="itemState.message='Selected evilrabbit'">
 <article size="xs" class="item">
 <figure>
 <span class="avatar"
 ><img src="../../images/avatars/01.png" alt=""
 /></span>
 </figure>
 <section>
 <h3>evilrabbit</h3>
 <p>evilrabbit@vercel.com</p>
 </section>
 </article>
 </button>
 </section>
 </menu>
 </div>
 </section>

 <section data-example="item-group" class="item-workflow">
 <ul>
 <li variant="outline" class="item">
 <figure>
 <span class="avatar"
 ><img src="../../images/avatars/02.png" alt="Jordan Lee"
 /></span>
 </figure>
 <section>
 <h3>Jordan Lee</h3>
 <p>jordan@example.com</p>
 </section>
 <menu>
 <button
 variant="ghost"
 size="icon-sm"
 type="button"
 aria-label="Invite Jordan Lee"
 >
 +
 </button>
 </menu>
 </li>
 <li variant="outline" class="item">
 <figure>
 <span class="avatar"
 ><img src="../../images/avatars/03.png" alt="maxleiter"
 /></span>
 </figure>
 <section>
 <h3>maxleiter</h3>
 <p>maxleiter@vercel.com</p>
 </section>
 <menu>
 <button
 variant="ghost"
 size="icon-sm"
 type="button"
 aria-label="Invite maxleiter"
 >
 +
 </button>
 </menu>
 </li>
 <li variant="outline" class="item">
 <figure>
 <span class="avatar"
 ><img src="../../images/avatars/01.png" alt="evilrabbit"
 /></span>
 </figure>
 <section>
 <h3>evilrabbit</h3>
 <p>evilrabbit@vercel.com</p>
 </section>
 <menu>
 <button
 variant="ghost"
 size="icon-sm"
 type="button"
 aria-label="Invite evilrabbit"
 >
 +
 </button>
 </menu>
 </li>
 </ul>
 </section>

 <section
 data-example="item-header"
 class="item-workflow item-workflow-wide"
 >
 <ul class="item-header-grid">
 <li variant="outline" class="item">
 <header class="item-header">
 <img src="../../images/avatars/01.png" alt="v0-1.5-sm" />
 </header>
 <section>
 <h3>v0-1.5-sm</h3>
 <p>Everyday tasks and UI generation.</p>
 </section>
 </li>
 <li variant="outline" class="item">
 <header class="item-header">
 <img src="../../images/avatars/02.png" alt="v0-1.5-lg" />
 </header>
 <section>
 <h3>v0-1.5-lg</h3>
 <p>Advanced thinking or reasoning.</p>
 </section>
 </li>
 <li variant="outline" class="item">
 <header class="item-header">
 <img src="../../images/avatars/03.png" alt="v0-2.0-mini" />
 </header>
 <section>
 <h3>v0-2.0-mini</h3>
 <p>Open Source model for everyone.</p>
 </section>
 </li>
 </ul>
 </section>

 <section data-example="item-link" class="item-workflow">
 <ul>
 <li href="#documentation" class="item">
 <section>
 <h3>Visit our documentation</h3>
 <p>Learn how to get started with our components.</p>
 </section>
 <menu aria-hidden="true">›</menu>
 </li>
 <li variant="outline" href="#external" class="item">
 <section>
 <h3>External resource</h3>
 <p>Opens in a new tab with security attributes.</p>
 </section>
 <menu aria-hidden="true">↗</menu>
 </li>
 </ul>
 </section>

 <section data-example="item-size" class="item-workflow">
 <ul>
 <li variant="outline" class="item">
 <figure variant="icon">□</figure>
 <section>
 <h3>Default Size</h3>
 <p>The standard size for most use cases.</p>
 </section>
 </li>
 <li variant="outline" size="sm" class="item">
 <figure variant="icon">□</figure>
 <section>
 <h3>Small Size</h3>
 <p>A compact size for dense layouts.</p>
 </section>
 </li>
 <li variant="outline" size="xs" class="item">
 <figure variant="icon">□</figure>
 <section>
 <h3>Extra Small Size</h3>
 <p>The most compact size available.</p>
 </section>
 </li>
 </ul>
 </section>

 <section data-example="item-variant" class="item-workflow">
 <ul>
 <li class="item">
 <figure variant="icon">□</figure>
 <section>
 <h3>Default Variant</h3>
 <p>Transparent background with no border.</p>
 </section>
 </li>
 <li variant="outline" class="item">
 <figure variant="icon">□</figure>
 <section>
 <h3>Outline Variant</h3>
 <p>Outlined style with a visible border.</p>
 </section>
 </li>
 <li variant="muted" class="item">
 <figure variant="icon">□</figure>
 <section>
 <h3>Muted Variant</h3>
 <p>Muted background for secondary content.</p>
 </section>
 </li>
 </ul>
 </section>

 <section data-example="muted-item-group" class="item-workflow">
 <ul>
 <li variant="muted" ng-repeat="number in [1,2,3]" class="item">
 <section>
 <h3>Item {{ number }}</h3>
 <p>Item in muted group.</p>
 </section>
 <menu>
 <button variant="outline" size="sm" type="button">Action</button>
 </menu>
 </li>
 </ul>
 </section>

 <section data-example="outline-item-group" class="item-workflow">
 <ul>
 <li variant="outline" ng-repeat="number in [1,2,3]" class="item">
 <figure variant="icon">□</figure>
 <section>
 <h3>Item {{ number }}</h3>
 <p>Item with icon.</p>
 </section>
 </li>
 </ul>
 </section>

 <section
 data-example="file-upload-list"
 class="item-workflow item-workflow-wide"
 >
 <ul>
 <li
 size="xs"
 class="file-upload-item item"
 ng-repeat="file in [{name:'document.pdf',progress:45,time:'2m 30s'},{name:'presentation.pptx',progress:78,time:'45s'},{name:'spreadsheet.xlsx',progress:12,time:'5m 12s'},{name:'image.jpg',progress:100,time:'Complete'}]"
 >
 <figure variant="icon">
 <svg viewBox="0 0 24 24" aria-hidden="true">
 <path
 d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
 ></path>
 <path d="M14 2v6h6"></path>
 </svg>
 </figure>
 <section>
 <h3>{{ file.name }}</h3>
 </section>
 <section class="file-upload-progress">
 <progress
 value="{{ file.progress }}"
 max="100"
 aria-label="Upload progress for {{ file.name }}"
 ></progress>
 </section>
 <menu class="file-upload-time">{{ file.time }}</menu>
 </li>
 </ul>
 </section>

 <section
 data-example="item-rtl"
 class="item-workflow"
 dir="rtl"
 lang="ar"
 >
 <ul>
 <li variant="outline" class="item">
 <section>
 <h3>عنصر أساسي</h3>
 <p>عنصر بسيط يحتوي على عنوان ووصف.</p>
 </section>
 <menu>
 <button variant="outline" size="sm" type="button">إجراء</button>
 </menu>
 </li>
 <li variant="outline" size="sm" href="#verified-rtl" class="item">
 <figure>✓</figure>
 <section>
 <h3>تم التحقق من ملفك الشخصي.</h3>
 </section>
 <menu aria-hidden="true">‹</menu>
 </li>
 </ul>
 </section>

 <output class="item-workflow-output">{{ itemState.message }}</output>
 </main>
 </body>
</html>

Installation

kbd

Mon, 01 Jan 0001 00:00:00 +0000

Use native kbd elements. Place related keys next to each other in a span.

<span>
 <kbd>Ctrl</kbd>
 <kbd>K</kbd>
</span>

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 Kbd</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="kbdAction='Ready'"
 data-example="kbd-button kbd-demo kbd-input-group kbd-rtl kbd-tooltip"
 >
 <main class="visual-example">
 <section class="kbd-row">
 <span>Open command menu</span>
 <span><kbd>Ctrl</kbd><kbd>K</kbd></span>
 <span>or</span>
 <kbd aria-label="Slash">/</kbd>
 </section>

 <button variant="outline" type="button" ng-click="kbdAction='Saved'">
 Save changes
 <span><kbd>Ctrl</kbd><kbd>S</kbd></span>
 </button>

 <div class="input-group">
 <input placeholder="Search..." aria-label="Search with shortcut" />
 <div align="inline-end">
 <kbd>⌘K</kbd>
 </div>
 </div>

 <span ng-tooltip>
 <button variant="outline" type="button">Keyboard help</button>
 <span side="top">Press <kbd>?</kbd> to open help.</span>
 </span>

 <section class="kbd-row" dir="rtl" lang="ar">
 <span>فتح قائمة الأوامر</span>
 <span><kbd>Ctrl</kbd><kbd>K</kbd></span>
 </section>

 <output class="kbd-output">{{ kbdAction }}</output>
 </main>
 </body>
</html>

Installation

label

Mon, 01 Jan 0001 00:00:00 +0000

Use a native label and connect it with for.

<label for="email">Email</label> <input id="email" required />

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 Label</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="labelTerms=false;labelTermsRtl=false"
 data-example="label-demo label-rtl"
 >
 <main class="visual-example">
 <form class="label-control-contract" aria-label="Label state contract">
 <label for="email">Email</label>
 <input id="email" placeholder="Email" />
 <label for="name">Name</label>
 <input id="name" placeholder="Name" />
 </form>

 <section class="label-checkbox-demo" aria-label="Label checkbox">
 <input id="label-terms" type="checkbox" ng-model="labelTerms" />
 <label for="label-terms">Accept terms and conditions</label>
 </section>

 <section
 class="label-checkbox-demo"
 aria-label="تسمية خانة الاختيار"
 dir="rtl"
 lang="ar"
 >
 <input id="label-terms-rtl" type="checkbox" ng-model="labelTermsRtl" />
 <label for="label-terms-rtl">قبول الشروط والأحكام</label>
 </section>

 <output class="label-output">
 Terms: {{ labelTerms ? 'accepted' : 'not accepted' }} · الشروط: {{
 labelTermsRtl ? 'مقبولة' : 'غير مقبولة' }}
 </output>
 </main>
 </body>
</html>

Installation

master-detail

Mon, 01 Jan 0001 00:00:00 +0000

Compose Resizable with semantic navigation and an article to browse records without losing context. AngularTS or routing owns the selected record and data.

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 Master Detail</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 data-example="master-detail-demo">
 <main
 class="master-detail visual-example"
 ng-resizable-panel-group
 aria-label="Customer workspace"
 >
 <section style="--panel-size: 0.75">
 <nav aria-label="Customers">
 <header><h2>Customers</h2></header>
 <ul>
 <li>
 <a href="#ada" aria-current="page"
 ><strong>Ada Lovelace</strong
 ><small>Enterprise · Active</small></a
 >
 </li>
 <li>
 <a href="#grace"
 ><strong>Grace Hopper</strong
 ><small>Business · Review</small></a
 >
 </li>
 <li>
 <a href="#edsger"
 ><strong>Edsger Dijkstra</strong
 ><small>Enterprise · Active</small></a
 >
 </li>
 </ul>
 </nav>
 </section>
 <hr aria-label="Resize customer list" />
 <section style="--panel-size: 2">
 <article id="ada">
 <header>
 <h1>Ada Lovelace</h1>
 <p>Enterprise customer since 2024</p>
 </header>
 <section>
 <dl>
 <div>
 <dt>Email</dt>
 <dd>ada@example.com</dd>
 </div>
 <div>
 <dt>Region</dt>
 <dd>Europe</dd>
 </div>
 <div>
 <dt>Status</dt>
 <dd>Active</dd>
 </div>
 </dl>
 </section>
 </article>
 </section>
 </main>
 </body>
</html>

Installation

menubar

Mon, 01 Jan 0001 00:00:00 +0000

Use ng-menubar around a strip of menu groups. Menu triggers support:

ArrowLeft/ArrowRight to move between menus
Enter/Space/ArrowDown to open a menu
Escape to close menus
Home/End shortcuts when a trigger is focused

<nav ng-menubar aria-label="Application menu">
 <section>
 <button>File</button>
 <menu>
 <button>New</button>
 <button>Open</button>
 </menu>
 </section>
 <section>
 <button>Edit</button>
 </section>
</nav>

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 Menubar</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="menubarDemo={bookmarks:false,fullUrls:true,profile:'benoit'}"
 data-example="menubar-demo"
 >
 <main class="visual-example">
 <nav ng-menubar aria-label="Browser application menu">
 <section>
 <button type="button">File</button>
 <menu>
 <section>
 <button type="button">New Tab <kbd>⌘T</kbd></button>
 <button type="button">New Window <kbd>⌘N</kbd></button>
 <button type="button" disabled>New Incognito Window</button>
 </section>
 <hr />
 <section>
 <details>
 <summary>Share</summary>
 <menu>
 <section>
 <button type="button">Email link</button>
 <button type="button">Messages</button>
 <button type="button">Notes</button>
 </section>
 </menu>
 </details>
 </section>
 <hr />
 <section>
 <button type="button">Print... <kbd>⌘P</kbd></button>
 </section>
 </menu>
 </section>

 <section>
 <button type="button">Edit</button>
 <menu>
 <section>
 <button type="button">Undo <kbd>⌘Z</kbd></button>
 <button type="button">Redo <kbd>⇧⌘Z</kbd></button>
 </section>
 <hr />
 <section>
 <details>
 <summary>Find</summary>
 <menu>
 <button type="button">Search the web</button>
 <hr />
 <button type="button">Find...</button>
 <button type="button">Find Next</button>
 <button type="button">Find Previous</button>
 </menu>
 </details>
 </section>
 <hr />
 <section>
 <button type="button">Cut</button>
 <button type="button">Copy</button>
 <button type="button">Paste</button>
 </section>
 </menu>
 </section>

 <section>
 <button type="button">View</button>
 <menu>
 <section>
 <button
 type="button"
 aria-checked="{{ menubarDemo.bookmarks }}"
 ng-click="menubarDemo.bookmarks=!menubarDemo.bookmarks"
 >
 Bookmarks Bar
 </button>
 <button
 type="button"
 aria-checked="{{ menubarDemo.fullUrls }}"
 ng-click="menubarDemo.fullUrls=!menubarDemo.fullUrls"
 >
 Full URLs
 </button>
 </section>
 <hr />
 <section>
 <button type="button" inset>Reload <kbd>⌘R</kbd></button>
 <button type="button" inset disabled>
 Force Reload <kbd>⇧⌘R</kbd>
 </button>
 </section>
 <hr />
 <button type="button" inset>Toggle Fullscreen</button>
 <hr />
 <button type="button" inset>Hide Sidebar</button>
 </menu>
 </section>

 <section>
 <button type="button">Profiles</button>
 <menu>
 <fieldset aria-label="Active profile">
 <button
 type="button"
 aria-checked="{{ menubarDemo.profile === 'andy' }}"
 ng-click="menubarDemo.profile='andy'"
 >
 Andy
 </button>
 <button
 type="button"
 aria-checked="{{ menubarDemo.profile === 'benoit' }}"
 ng-click="menubarDemo.profile='benoit'"
 >
 Benoit
 </button>
 <button
 type="button"
 aria-checked="{{ menubarDemo.profile === 'luis' }}"
 ng-click="menubarDemo.profile='luis'"
 >
 Luis
 </button>
 </fieldset>
 <hr />
 <button type="button" inset>Edit...</button>
 <hr />
 <button type="button" inset>Add Profile...</button>
 </menu>
 </section>
 </nav>
 </main>
 </body>
</html>

Installation

Install AngularCSS, load its stylesheet, and include the angular.css module in your AngularTS application. See Installation for the complete setup.

navigation-menu

Mon, 01 Jan 0001 00:00:00 +0000

Navigation menu is exposed as semantic nav markup with list, item, trigger, link, and content parts.

<nav ng-navigation-menu>
 <ul>
 <li>
 <button>Components</button>
 <section>Links</section>
 </li>
 </ul>
</nav>

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 Navigation Menu</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 data-example="navigation-menu-demo">
 <main>
 <nav ng-navigation-menu aria-label="Primary navigation">
 <ul>
 <li>
 <button type="button">Getting started</button>
 <section>
 <ul>
 <li>
 <a href="#introduction">
 <strong>Introduction</strong>
 <span>Reusable components built with semantic HTML.</span>
 </a>
 </li>
 <li>
 <a href="#installation">
 <strong>Installation</strong>
 <span
 >How to install dependencies and structure your app.</span
 >
 </a>
 </li>
 <li>
 <a href="#typography">
 <strong>Typography</strong>
 <span>Styles for headings, paragraphs, lists...etc</span>
 </a>
 </li>
 </ul>
 </section>
 </li>

 <li>
 <button type="button">Components</button>
 <section>
 <ul>
 <li>
 <a href="#alert-dialog">
 <strong>Alert Dialog</strong>
 <span
 >A modal dialog with important content that expects a
 response.</span
 >
 </a>
 </li>
 <li>
 <a href="#hover-card">
 <strong>Hover Card</strong>
 <span>Preview content available behind a link.</span>
 </a>
 </li>
 <li>
 <a href="#progress">
 <strong>Progress</strong>
 <span>Displays the completion progress of a task.</span>
 </a>
 </li>
 <li>
 <a href="#scroll-area">
 <strong>Scroll-area</strong>
 <span>Visually or semantically separates content.</span>
 </a>
 </li>
 <li>
 <a href="#tabs">
 <strong>Tabs</strong>
 <span>Layered sections displayed one at a time.</span>
 </a>
 </li>
 <li>
 <a href="#tooltip">
 <strong>Tooltip</strong>
 <span>Information shown from keyboard focus or hover.</span>
 </a>
 </li>
 </ul>
 </section>
 </li>

 <li>
 <button type="button">With Icon</button>
 <section>
 <ul>
 <li>
 <a href="#backlog">
 <svg
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 >
 <circle cx="12" cy="12" r="10"></circle>
 <path d="M12 8v4m0 4h.01"></path>
 </svg>
 Backlog
 </a>
 </li>
 <li>
 <a href="#todo">
 <svg
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 >
 <circle
 cx="12"
 cy="12"
 r="10"
 stroke-dasharray="4 3"
 ></circle>
 </svg>
 To Do
 </a>
 </li>
 <li>
 <a href="#done">
 <svg
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 >
 <circle cx="12" cy="12" r="10"></circle>
 <path d="m8 12 2.5 2.5L16 9"></path>
 </svg>
 Done
 </a>
 </li>
 </ul>
 </section>
 </li>

 <li>
 <a href="#docs">Docs</a>
 </li>
 </ul>
 </nav>
 </main>
 </body>
</html>

Installation

Install AngularCSS, load its stylesheet, and include the angular.css module in your AngularTS application. See Installation for the complete setup.

pagination

Mon, 01 Jan 0001 00:00:00 +0000

Use nav with aria-label="pagination" and mark the current page with aria-current="page".

<nav aria-label="pagination" class="pagination">
 <ul>
 <li>
 <a href="#">1</a>
 </li>
 <li>
 <a aria-current="page" href="#">2</a>
 </li>
 </ul>
</nav>

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 Pagination</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 data-example="pagination-demo">
 <main class="visual-example">
 <nav aria-label="pagination" class="pagination">
 <ul>
 <li>
 <a href="#previous" rel="prev" aria-label="Go to previous page">
 <svg
 icon="inline-start"
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 >
 <path d="m15 18-6-6 6-6"></path>
 </svg>
 <span>Previous</span>
 </a>
 </li>
 <li>
 <a href="#page-1">1</a>
 </li>
 <li>
 <a href="#page-2" aria-current="page">2</a>
 </li>
 <li>
 <a href="#page-3">3</a>
 </li>
 <li>
 <span aria-hidden="true">
 <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
 <circle cx="5" cy="12" r="1.5"></circle>
 <circle cx="12" cy="12" r="1.5"></circle>
 <circle cx="19" cy="12" r="1.5"></circle>
 </svg>
 <span>More pages</span>
 </span>
 </li>
 <li>
 <a href="#next" rel="next" aria-label="Go to next page">
 <span>Next</span>
 <svg
 icon="inline-end"
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 >
 <path d="m9 18 6-6-6-6"></path>
 </svg>
 </a>
 </li>
 </ul>
 </nav>
 </main>
 </body>
</html>

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 Pagination 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="paginationWorkflow={showPage4:false,activePage:2,nextDisabled:false,rows:'25'}"
 data-example="pagination-icons-only pagination-rtl pagination-simple"
 >
 <main class="visual-example">
 <section aria-labelledby="pagination-dynamic-heading">
 <header>
 <h2 id="pagination-dynamic-heading">Application state</h2>
 <div class="component-state-actions">
 <button
 type="button"
 variant="outline"
 size="sm"
 ng-click="paginationWorkflow.showPage4=!paginationWorkflow.showPage4; paginationWorkflow.activePage=paginationWorkflow.showPage4 ? 4 : 2"
 >
 {{ paginationWorkflow.showPage4 ? 'Remove page 4' : 'Add page 4'
 }}
 </button>
 <button
 type="button"
 variant="outline"
 size="sm"
 ng-click="paginationWorkflow.nextDisabled=!paginationWorkflow.nextDisabled"
 >
 {{ paginationWorkflow.nextDisabled ? 'Enable next' : 'Disable
 next' }}
 </button>
 </div>
 </header>
 <nav
 aria-label="Dynamic pagination"
 id="dynamic-pagination"
 class="pagination"
 >
 <ul>
 <li>
 <a
 href="#page-1"
 ng-click="paginationWorkflow.activePage=1"
 aria-current="{{ paginationWorkflow.activePage === 1 ? 'page' : 'false' }}"
 >1</a
 >
 </li>
 <li>
 <a
 href="#page-2"
 ng-click="paginationWorkflow.activePage=2"
 aria-current="{{ paginationWorkflow.activePage === 2 ? 'page' : 'false' }}"
 >2</a
 >
 </li>
 <li>
 <a
 href="#page-3"
 ng-click="paginationWorkflow.activePage=3"
 aria-current="{{ paginationWorkflow.activePage === 3 ? 'page' : 'false' }}"
 >3</a
 >
 </li>
 <li ng-if="paginationWorkflow.showPage4">
 <a
 href="#page-4"
 ng-click="paginationWorkflow.activePage=4"
 aria-current="{{ paginationWorkflow.activePage === 4 ? 'page' : 'false' }}"
 >4</a
 >
 </li>
 <li>
 <a
 href="#next"
 rel="next"
 aria-label="Go to next page"
 aria-disabled="{{ paginationWorkflow.nextDisabled }}"
 >
 <span>Next</span>
 <svg
 icon="inline-end"
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 >
 <path d="m9 18 6-6-6-6"></path>
 </svg>
 </a>
 </li>
 </ul>
 </nav>
 </section>

 <section aria-labelledby="pagination-simple-heading">
 <header>
 <h2 id="pagination-simple-heading">Simple</h2>
 </header>
 <nav aria-label="Simple pagination" class="pagination">
 <ul>
 <li>
 <a href="#simple-1">1</a>
 </li>
 <li>
 <a href="#simple-2" aria-current="page">2</a>
 </li>
 <li>
 <a href="#simple-3">3</a>
 </li>
 <li>
 <a href="#simple-4">4</a>
 </li>
 <li>
 <a href="#simple-5">5</a>
 </li>
 </ul>
 </nav>
 </section>

 <section aria-labelledby="pagination-icons-heading">
 <header>
 <h2 id="pagination-icons-heading">Rows</h2>
 </header>
 <div class="pagination-compact-row">
 <label class="pagination-rows-field" for="pagination-rows-per-page">
 <span>Rows per page</span>
 <select
 id="pagination-rows-per-page"
 ng-model="paginationWorkflow.rows"
 >
 <option value="10">10</option>
 <option value="25">25</option>
 <option value="50">50</option>
 <option value="100">100</option>
 </select>
 </label>
 <nav aria-label="Compact pagination" class="pagination">
 <ul>
 <li>
 <a
 href="#compact-previous"
 rel="prev"
 aria-label="Go to previous page"
 >
 <svg
 icon="inline-start"
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 >
 <path d="m15 18-6-6 6-6"></path>
 </svg>
 </a>
 </li>
 <li>
 <a href="#compact-next" rel="next" aria-label="Go to next page">
 <svg
 icon="inline-end"
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 >
 <path d="m9 18 6-6-6-6"></path>
 </svg>
 </a>
 </li>
 </ul>
 </nav>
 </div>
 <output class="workflow-output">
 Rows: <span ng-bind="paginationWorkflow.rows"></span>
 </output>
 </section>

 <section aria-labelledby="pagination-rtl-heading" lang="ar">
 <header>
 <h2 id="pagination-rtl-heading">الصفحات</h2>
 </header>
 <nav
 dir="rtl"
 aria-label="ترقيم الصفحات"
 id="rtl-pagination"
 class="pagination"
 >
 <ul>
 <li>
 <a
 href="#rtl-previous"
 rel="prev"
 aria-label="الانتقال إلى الصفحة السابقة"
 >
 <svg
 icon="inline-start"
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 >
 <path d="m15 18-6-6 6-6"></path>
 </svg>
 <span>السابق</span>
 </a>
 </li>
 <li>
 <a href="#rtl-1">١</a>
 </li>
 <li>
 <a href="#rtl-2" aria-current="page">٢</a>
 </li>
 <li>
 <a href="#rtl-3">٣</a>
 </li>
 <li>
 <span>
 <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
 <circle cx="5" cy="12" r="1.5"></circle>
 <circle cx="12" cy="12" r="1.5"></circle>
 <circle cx="19" cy="12" r="1.5"></circle>
 </svg>
 <span>صفحات إضافية</span>
 </span>
 </li>
 <li>
 <a
 href="#rtl-next"
 rel="next"
 aria-label="الانتقال إلى الصفحة التالية"
 >
 <span>التالي</span>
 <svg
 icon="inline-end"
 aria-hidden="true"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 >
 <path d="m9 18 6-6-6-6"></path>
 </svg>
 </a>
 </li>
 </ul>
 </nav>
 </section>
 </main>
 </body>
</html>

Installation

popover

Mon, 01 Jan 0001 00:00:00 +0000

Connect a native button to semantic popover content with popovertarget and popover. The browser owns top-layer rendering, Escape, and light dismissal.

<span>
 <button popovertarget="dimensions">Open</button>
 <aside id="dimensions" popover>Content</aside>
</span>

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 Popover</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 data-example="popover-demo">
 <main class="visual-example">
 <span aria-label="Dimensions popover">
 <button
 type="button"
 variant="outline"
 popovertarget="popover-popover-1-content"
 >
 Open popover
 </button>
 <aside
 aria-label="Dimensions"
 id="popover-popover-1-content"
 side="bottom"
 align="center"
 popover
 >
 <header>
 <h2>Dimensions</h2>
 <p>Set the dimensions for the layer.</p>
 </header>
 <form>
 <label
 ><span>Width</span>
 <input id="popover-width" value="100%" autofocus />
 </label>
 <label
 ><span>Max. width</span>
 <input id="popover-max-width" value="300px" />
 </label>
 <label
 ><span>Height</span>
 <input id="popover-height" value="25px" />
 </label>
 <label
 ><span>Max. height</span>
 <input id="popover-max-height" value="none" />
 </label>
 </form>
 </aside>
 </span>
 </main>
 </body>
</html>

Installation

progress

Mon, 01 Jan 0001 00:00:00 +0000

Use native progress. Compose its label and value with native label and output elements when needed.

<div>
 <label id="upload-progress-label">Upload progress</label>
 <output>56%</output>
 <progress
 value="56"
 max="100"
 aria-labelledby="upload-progress-label"
 ></progress>
</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 Progress</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>
 <script src="../../js/progress-demo.umd.js"></script>
 </head>
 <body
 ng-app="progressDemo"
 ng-controller="ProgressDemoController"
 ng-cloak
 data-example="progress-demo progress-label"
 >
 <main class="visual-example">
 <section aria-labelledby="progress-timed-title">
 <h2 id="progress-timed-title" class="visually-hidden">
 Loading progress
 </h2>
 <progress
 value="{{ demoValue }}"
 max="100"
 aria-labelledby="progress-timed-title"
 class="progress-demo-timed"
 ></progress>
 </section>

 <section>
 <div class="progress-demo-labeled">
 <label id="upload-progress-label"> Upload progress </label>
 <output for="upload-progress">56%</output>
 <progress
 id="upload-progress"
 value="56"
 max="100"
 aria-labelledby="upload-progress-label"
 ></progress>
 </div>
 </section>
 </main>
 </body>
</html>

Controlled and RTL

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Progress 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="progressWorkflow={controlled:50}"
 data-example="progress-controlled progress-rtl"
 >
 <main class="progress-workflows visual-example">
 <section aria-labelledby="progress-controlled-title">
 <div class="workflow-heading">
 <h2 id="progress-controlled-title">Controlled</h2>
 <output for="progress-controlled-slider">
 {{ progressWorkflow.controlled }}%
 </output>
 </div>
 <progress
 value="{{ progressWorkflow.controlled }}"
 max="100"
 aria-labelledby="progress-controlled-title"
 ></progress>
 <input
 ng-range-slider
 id="progress-controlled-slider"
 type="range"
 min="0"
 max="100"
 step="1"
 ng-model="progressWorkflow.controlled"
 aria-label="Progress value"
 />
 </section>

 <section lang="ar">
 <div dir="rtl">
 <label id="rtl-upload-progress-label"> تقدم الرفع </label>
 <output for="rtl-upload-progress">٥٦%</output>
 <progress
 id="rtl-upload-progress"
 value="56"
 max="100"
 aria-labelledby="rtl-upload-progress-label"
 ></progress>
 </div>
 </section>
 </main>
 </body>
</html>

Installation

radio-group

Mon, 01 Jan 0001 00:00:00 +0000

Use a native fieldset with a legend and radio inputs. AngularCSS recognizes the semantic group and styles its native radio descendants directly.

<fieldset>
 <div class="field" orientation="horizontal">
 <input id="default" name="density" type="radio" value="default" />
 <label for="default">Default</label>
 </div>
</fieldset>

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 Radio Group</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="density='comfortable'"
 data-example="radio-group-demo"
 >
 <fieldset class="visual-example">
 <legend class="visually-hidden">Density</legend>

 <div orientation="horizontal" class="field">
 <input
 id="density-default"
 name="density"
 type="radio"
 value="default"
 ng-model="density"
 />
 <label for="density-default">Default</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="density-comfortable"
 name="density"
 type="radio"
 value="comfortable"
 ng-model="density"
 />
 <label for="density-comfortable">Comfortable</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="density-compact"
 name="density"
 type="radio"
 value="compact"
 ng-model="density"
 />
 <label for="density-compact">Compact</label>
 </div>

 <output class="visually-hidden" aria-live="polite">
 Selected: <span ng-bind="density"></span>
 </output>
 </fieldset>
 </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 Radio Group 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="planType='plus'; densityDescription='comfortable'; disabledChoice='option2'; subscription='monthly'; notification='email'; rtlDensity='comfortable'"
 data-example="radio-group-choice-card radio-group-description radio-group-disabled radio-group-fieldset radio-group-invalid radio-group-rtl"
 >
 <main class="radio-group-workflows">
 <section class="radio-workflow-section" aria-label="Plan choice cards">
 <fieldset class="radio-choice-list">
 <label for="plus-plan" class="radio-choice">
 <div orientation="horizontal" class="field">
 <span>
 <strong>Plus</strong>
 <small> For individuals and small teams. </small>
 </span>
 <input
 id="plus-plan"
 name="plan-type"
 type="radio"
 value="plus"
 ng-model="planType"
 />
 </div>
 </label>
 <label for="pro-plan" class="radio-choice">
 <div orientation="horizontal" class="field">
 <span>
 <strong>Pro</strong>
 <small> For growing businesses. </small>
 </span>
 <input
 id="pro-plan"
 name="plan-type"
 type="radio"
 value="pro"
 ng-model="planType"
 />
 </div>
 </label>
 <label for="enterprise-plan" class="radio-choice">
 <div orientation="horizontal" class="field">
 <span>
 <strong>Enterprise</strong>
 <small> For large teams and enterprises. </small>
 </span>
 <input
 id="enterprise-plan"
 name="plan-type"
 type="radio"
 value="enterprise"
 ng-model="planType"
 />
 </div>
 </label>
 </fieldset>
 </section>

 <section class="radio-workflow-section" aria-label="Density descriptions">
 <fieldset class="radio-description-list">
 <div orientation="horizontal" class="field">
 <input
 id="desc-r1"
 name="density-description"
 type="radio"
 value="default"
 ng-model="densityDescription"
 />
 <section>
 <label for="desc-r1">Default</label>
 <p>Standard spacing for most use cases.</p>
 </section>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="desc-r2"
 name="density-description"
 type="radio"
 value="comfortable"
 ng-model="densityDescription"
 />
 <section>
 <label for="desc-r2">Comfortable</label>
 <p>More space between elements.</p>
 </section>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="desc-r3"
 name="density-description"
 type="radio"
 value="compact"
 ng-model="densityDescription"
 />
 <section>
 <label for="desc-r3">Compact</label>
 <p>Minimal spacing for dense layouts.</p>
 </section>
 </div>
 </fieldset>
 </section>

 <section class="radio-workflow-section" aria-label="Disabled radio">
 <fieldset class="radio-simple-list">
 <div orientation="horizontal" class="field">
 <input
 id="disabled-1"
 name="disabled-choice"
 type="radio"
 value="option1"
 disabled
 ng-model="disabledChoice"
 />
 <label for="disabled-1" class="radio-plain-label"> Disabled </label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="disabled-2"
 name="disabled-choice"
 type="radio"
 value="option2"
 ng-model="disabledChoice"
 />
 <label for="disabled-2" class="radio-plain-label"> Option 2 </label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="disabled-3"
 name="disabled-choice"
 type="radio"
 value="option3"
 ng-model="disabledChoice"
 />
 <label for="disabled-3" class="radio-plain-label"> Option 3 </label>
 </div>
 </fieldset>
 </section>

 <section
 class="radio-workflow-section"
 aria-label="Subscription fieldset"
 >
 <fieldset class="radio-fieldset field-set">
 <legend variant="label">Subscription Plan</legend>
 <p>Yearly and lifetime plans offer significant savings.</p>

 <div orientation="horizontal" class="field">
 <input
 id="plan-monthly"
 name="subscription"
 type="radio"
 value="monthly"
 ng-model="subscription"
 />
 <label for="plan-monthly" class="radio-plain-label">
 Monthly ($9.99/month)
 </label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="plan-yearly"
 name="subscription"
 type="radio"
 value="yearly"
 ng-model="subscription"
 />
 <label for="plan-yearly" class="radio-plain-label">
 Yearly ($99.99/year)
 </label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="plan-lifetime"
 name="subscription"
 type="radio"
 value="lifetime"
 ng-model="subscription"
 />
 <label for="plan-lifetime" class="radio-plain-label">
 Lifetime ($299.99)
 </label>
 </div>
 </fieldset>
 </section>

 <section class="radio-workflow-section" aria-label="Invalid radio group">
 <fieldset class="radio-fieldset field-set">
 <legend variant="label">Notification Preferences</legend>
 <p>Choose how you want to receive notifications.</p>

 <div orientation="horizontal" class="field">
 <input
 id="invalid-email"
 name="notification"
 type="radio"
 value="email"
 aria-invalid="true"
 ng-model="notification"
 />
 <label for="invalid-email" class="radio-plain-label">
 Email only
 </label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="invalid-sms"
 name="notification"
 type="radio"
 value="sms"
 aria-invalid="true"
 ng-model="notification"
 />
 <label for="invalid-sms" class="radio-plain-label">
 SMS only
 </label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="invalid-both"
 name="notification"
 type="radio"
 value="both"
 aria-invalid="true"
 ng-model="notification"
 />
 <label for="invalid-both" class="radio-plain-label">
 Both Email &amp; SMS
 </label>
 </div>
 </fieldset>
 </section>

 <section
 class="radio-workflow-section"
 aria-label="RTL density options"
 dir="rtl"
 lang="ar"
 >
 <fieldset class="radio-description-list" dir="rtl">
 <div orientation="horizontal" class="field">
 <input
 id="r1-rtl"
 name="rtl-density"
 type="radio"
 value="default"
 dir="rtl"
 ng-model="rtlDensity"
 />
 <section>
 <label for="r1-rtl" dir="rtl">افتراضي</label>
 <p dir="rtl">تباعد قياسي لمعظم حالات الاستخدام.</p>
 </section>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="r2-rtl"
 name="rtl-density"
 type="radio"
 value="comfortable"
 dir="rtl"
 ng-model="rtlDensity"
 />
 <section>
 <label for="r2-rtl" dir="rtl">مريح</label>
 <p dir="rtl">مساحة أكبر بين العناصر.</p>
 </section>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="r3-rtl"
 name="rtl-density"
 type="radio"
 value="compact"
 dir="rtl"
 ng-model="rtlDensity"
 />
 <section>
 <label for="r3-rtl" dir="rtl">مضغوط</label>
 <p dir="rtl">تباعد أدنى للتخطيطات الكثيفة.</p>
 </section>
 </div>
 </fieldset>
 </section>
 </main>
 </body>
</html>

Field Compositions

View source

<!doctype html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>AngularCSS Radio Fields</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="radioFields={subscription:'free',battery:'',security:'',unlock:'',invalid:'',disabled:''}"
 data-example="radio-fields"
 >
 <main class="radio-fields-demo visual-example field-group">
 <fieldset class="field-set">
 <legend variant="label" id="subscription-title">
 Subscription Plan
 </legend>

 <div orientation="horizontal" class="field">
 <input
 id="radio-free"
 name="subscription-plan"
 type="radio"
 value="free"
 ng-model="radioFields.subscription"
 />
 <label for="radio-free" class="radio-plain-label"> Free Plan </label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="radio-pro"
 name="subscription-plan"
 type="radio"
 value="pro"
 ng-model="radioFields.subscription"
 />
 <label for="radio-pro" class="radio-plain-label"> Pro Plan </label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="radio-enterprise"
 name="subscription-plan"
 type="radio"
 value="enterprise"
 ng-model="radioFields.subscription"
 />
 <label for="radio-enterprise" class="radio-plain-label">
 Enterprise
 </label>
 </div>
 </fieldset>

 <fieldset class="field-set" aria-describedby="battery-description">
 <legend variant="label" id="battery-title">Battery Level</legend>
 <p id="battery-description">Choose your preferred battery level.</p>

 <div orientation="horizontal" class="field">
 <input
 id="battery-high"
 name="battery-level"
 type="radio"
 value="high"
 ng-model="radioFields.battery"
 />
 <label for="battery-high">High</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="battery-medium"
 name="battery-level"
 type="radio"
 value="medium"
 ng-model="radioFields.battery"
 />
 <label for="battery-medium">Medium</label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="battery-low"
 name="battery-level"
 type="radio"
 value="low"
 ng-model="radioFields.battery"
 />
 <label for="battery-low">Low</label>
 </div>
 </fieldset>

 <fieldset class="radio-fields-content-list" aria-label="Device security">
 <div orientation="horizontal" class="field">
 <input
 id="radio-content-1"
 name="device-security"
 type="radio"
 value="touch"
 ng-model="radioFields.security"
 />
 <section>
 <label for="radio-content-1">Enable Touch ID</label>
 <p>Enable Touch ID to quickly unlock your device.</p>
 </section>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="radio-content-2"
 name="device-security"
 type="radio"
 value="biometric"
 ng-model="radioFields.security"
 />
 <section>
 <label for="radio-content-2">
 Enable Touch ID and Face ID to make it even faster to unlock your
 device. This is a long label to test the layout.
 </label>
 <p>Enable Touch ID to quickly unlock your device.</p>
 </section>
 </div>
 </fieldset>

 <fieldset class="radio-fields-title-list" aria-label="Device unlock">
 <label for="radio-title-1">
 <div orientation="horizontal" class="field">
 <input
 id="radio-title-1"
 name="device-unlock"
 type="radio"
 value="touch"
 ng-model="radioFields.unlock"
 />
 <span>
 <strong>Enable Touch ID</strong>
 <small> Enable Touch ID to quickly unlock your device. </small>
 </span>
 </div>
 </label>
 <label for="radio-title-2">
 <div orientation="horizontal" class="field">
 <input
 id="radio-title-2"
 name="device-unlock"
 type="radio"
 value="biometric"
 ng-model="radioFields.unlock"
 />
 <span>
 <strong>
 Enable Touch ID and Face ID to make it even faster to unlock
 your device. This is a long label to test the layout.
 </strong>
 <small> Enable Touch ID to quickly unlock your device. </small>
 </span>
 </div>
 </label>
 </fieldset>

 <fieldset class="field-set">
 <legend variant="label" id="invalid-title">Invalid Radio Group</legend>

 <div orientation="horizontal" class="field">
 <input
 id="radio-invalid-1"
 name="invalid-choice"
 type="radio"
 value="invalid1"
 aria-invalid="true"
 ng-model="radioFields.invalid"
 />
 <label for="radio-invalid-1"> Invalid Option 1 </label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="radio-invalid-2"
 name="invalid-choice"
 type="radio"
 value="invalid2"
 aria-invalid="true"
 ng-model="radioFields.invalid"
 />
 <label for="radio-invalid-2"> Invalid Option 2 </label>
 </div>
 </fieldset>

 <fieldset class="field-set" disabled>
 <legend variant="label" id="disabled-title">
 Disabled Radio Group
 </legend>

 <div orientation="horizontal" class="field">
 <input
 id="radio-disabled-1"
 name="disabled-choice"
 type="radio"
 value="disabled1"
 ng-model="radioFields.disabled"
 />
 <label for="radio-disabled-1"> Disabled Option 1 </label>
 </div>
 <div orientation="horizontal" class="field">
 <input
 id="radio-disabled-2"
 name="disabled-choice"
 type="radio"
 value="disabled2"
 ng-model="radioFields.disabled"
 />
 <label for="radio-disabled-2"> Disabled Option 2 </label>
 </div>
 </fieldset>
 </main>
 </body>
</html>