Elements on AngularCSShttps://angular-wave.github.io/angular.css/docs/elements/Recent content in Elements on AngularCSSHugoenbuttonhttps://angular-wave.github.io/angular.css/docs/elements/button/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/button/<p>Native <code>button</code> elements and button-type inputs are styled directly. Set <code>variant</code>/<code>size</code> attributes for variants and spacing. A link may opt into the same presentation with a <code>variant</code> attribute when it navigates to another location.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span>Default<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Outline<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Small<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/button.html" title="Button examples" loading="lazy" scrolling="no" style="height: 260px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Button<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Button<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Submit&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m5 12 7-7 7 7M12 19V5&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="variant-workflows">Variant workflows<a class="td-heading-self-link" href="#variant-workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/button-workflows.html" title="Button variants, sizes, loading, and RTL" loading="lazy" scrolling="no" style="height: 480px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Button Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;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&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-stack&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Button variants&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span>Button<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Secondary<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;destructive&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Destructive<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Outline<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ghost&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Ghost<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;link&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Link<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Status buttons&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;info&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Information<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;success&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Success<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;warning&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Warning<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row workflow-sizes&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Button sizes&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;xs&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Extra Small<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-xs&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Submit extra small&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M7 17 17 7M7 7h10v10&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Small<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-sm&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Submit small&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M7 17 17 7M7 7h10v10&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Default<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Submit default&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M7 17 17 7M7 7h10v10&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;lg&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Large<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-lg&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Submit large&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M7 17 17 7M7 7h10v10&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Rounded and icon buttons&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#login&#34;</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Login<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;submit&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button-rounded&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Get Started<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button-rounded&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Continue&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m5 12 7-7 7 7M12 19V5&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M6 3v12M18 9v12M6 9c6 0 6 6 12 6M18 3v3&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> New Branch </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Fork </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M6 3v12M18 9v12M6 9c6 0 6 6 12 6M18 3v3&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Loading buttons&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">disabled</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-start&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Generating </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> <span style="color:#c4a000">aria-disabled</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Downloading </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;spinner&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M21 12a9 9 0 1 1-6.22-8.56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-row&#34;</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;RTL buttons&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>زر<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;destructive&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>حذف<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> إرسال </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">icon</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl-flip&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m9 18 6-6-6-6&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linecap</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-linejoin</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;round&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>checkboxhttps://angular-wave.github.io/angular.css/docs/elements/checkbox/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/checkbox/<p>Use a native checkbox input. AngularCSS styles it directly; native input state and AngularTS <code>ng-model</code> remain the source of truth. Use <code>role=&quot;switch&quot;</code> only when the checkbox needs switch semantics and presentation.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Accept terms <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><p>Set the native <code>HTMLInputElement.indeterminate</code> property from application code when a mixed selection is needed. Native <code>:indeterminate</code> state owns both the visual and accessibility contract; AngularCSS does not create a second checkbox model.</p> <h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/checkbox.html" title="Checkbox example" loading="lazy" scrolling="no" style="height: 420px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Checkbox<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms=false;termsDetails=true;wrappedNotifications=false&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Accept terms and conditions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;termsDetails&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-2&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Accept terms and conditions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>By clicking this checkbox, you agree to the terms.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">disabled</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-checkbox&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Enable notifications<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-checkbox-2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-checkbox-2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;wrappedNotifications&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Enable notifications<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> You can enable or disable notifications at any time. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;polite&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Terms {{ terms ? &#39;accepted&#39; : &#39;not accepted&#39; }}. Detailed terms {{ </span></span><span style="display:flex;"><span> termsDetails ? &#39;accepted&#39; : &#39;not accepted&#39; }}. Notifications {{ </span></span><span style="display:flex;"><span> wrappedNotifications ? &#39;enabled&#39; : &#39;disabled&#39; }}. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="states-group-and-rtl">States, group, and RTL<a class="td-heading-self-link" href="#states-group-and-rtl" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/checkbox-workflows.html" title="Checkbox reference workflows" loading="lazy" scrolling="no" style="height: 1200px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Checkbox Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;basic=false;described=true;hardDisks=true;externalDisks=true;cds=false;servers=false;rtlTerms=false;rtlDetails=true;rtlNotifications=false&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-basic checkbox-description checkbox-disabled checkbox-group checkbox-invalid checkbox-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-workflow-grid&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Checkbox workflows&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-basic-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-basic-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Basic<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-workflow-narrow field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-basic&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-basic&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;basic&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-basic&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Accept terms and conditions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-description-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-description-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Description<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-workflow-description field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-desc&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-desc&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;described&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-desc&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Accept terms and conditions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> By clicking this checkbox, you agree to the terms and </span></span><span style="display:flex;"><span> conditions. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-disabled-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-disabled-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Disabled<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-workflow-narrow field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-checkbox-disabled&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-checkbox-disabled&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">disabled</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-checkbox-disabled&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Enable notifications<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-invalid-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-invalid-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Invalid<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-workflow-narrow field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-invalid&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-invalid&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-invalid</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-invalid&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Accept terms and conditions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-group-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-group-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Group<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Show these items on the desktop:<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Select the items you want to show on the desktop.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-preference-group field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;hard-disks&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;hardDisks&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;hard-disks&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Hard disks<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;external-disks&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;externalDisks&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;external-disks&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>External disks<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;cds-dvds&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;cds&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;cds-dvds&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>CDs, DVDs, and iPods<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;connected-servers&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;servers&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;connected-servers&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Connected servers<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-workflow checkbox-workflow-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-rtl-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-rtl-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>من اليمين إلى اليسار<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlTerms&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>قبول الشروط والأحكام<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-2-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDetails&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms-checkbox-2-rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>قبول الشروط والأحكام<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>بالنقر على هذا المربع، فإنك توافق على الشروط.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-checkbox-rtl&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">disabled</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-checkbox-rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>تفعيل الإشعارات<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;toggle-checkbox-2-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlNotifications&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>تفعيل الإشعارات<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span>يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;polite&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Basic {{ basic }}. Described {{ described }}. Hard disks {{ hardDisks </span></span><span style="display:flex;"><span> }}. External disks {{ externalDisks }}. CDs {{ cds }}. Servers {{ </span></span><span style="display:flex;"><span> servers }}. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="table-selection">Table selection<a class="td-heading-self-link" href="#table-selection" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/checkbox-compositions.html" title="Checkbox table composition" loading="lazy" scrolling="no" style="height: 420px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Checkbox Compositions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;selection={allRows:false};rows=[{id:&#39;1&#39;,name:&#39;Sarah Chen&#39;,email:&#39;sarah.chen@example.com&#39;,role:&#39;Admin&#39;,selected:true},{id:&#39;2&#39;,name:&#39;Marcus Rodriguez&#39;,email:&#39;marcus.rodriguez@example.com&#39;,role:&#39;User&#39;,selected:false},{id:&#39;3&#39;,name:&#39;Priya Patel&#39;,email:&#39;priya.patel@example.com&#39;,role:&#39;User&#39;,selected:false},{id:&#39;4&#39;,name:&#39;David Kim&#39;,email:&#39;david.kim@example.com&#39;,role:&#39;Editor&#39;,selected:false}]&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-table&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-table-demo&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Checkbox table composition&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">table</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Team members&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-table-select&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;select-all-checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;select-all-checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;selection.allRows&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-change</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rows[0].selected=selection.allRows;rows[1].selected=selection.allRows;rows[2].selected=selection.allRows;rows[3].selected=selection.allRows&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Select all rows&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Name<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Email<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Role<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span> <span style="color:#c4a000">ng-repeat</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row in rows&#34;</span> <span style="color:#c4a000">aria-selected</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ row.selected }}&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-table-select&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row-{{ row.id }}-checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row-{{ row.id }}-checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row.selected&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-change</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;selection.allRows=rows[0].selected &amp;&amp; rows[1].selected &amp;&amp; rows[2].selected &amp;&amp; rows[3].selected&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Select {{ row.name }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox-table-name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>{{ row.name }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>{{ row.email }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>{{ row.role }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;polite&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Sarah Chen {{ rows[0].selected ? &#39;selected&#39; : &#39;not selected&#39; }}. Marcus </span></span><span style="display:flex;"><span> Rodriguez {{ rows[1].selected ? &#39;selected&#39; : &#39;not selected&#39; }}. Priya </span></span><span style="display:flex;"><span> Patel {{ rows[2].selected ? &#39;selected&#39; : &#39;not selected&#39; }}. David Kim {{ </span></span><span style="display:flex;"><span> rows[3].selected ? &#39;selected&#39; : &#39;not selected&#39; }}. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>dialoghttps://angular-wave.github.io/angular.css/docs/elements/dialog/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/dialog/<p>Compose a modal from a declarative invoker and native <code>dialog</code>. The browser owns modal focus and disclosure; AngularTS owns form values and application actions.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dialog&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">commandfor</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog&#34;</span> <span style="color:#c4a000">command</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;show-modal&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Edit profile<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dialog</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span>Edit profile<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Update your public profile.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">commandfor</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog&#34;</span> <span style="color:#c4a000">command</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;close&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Save changes<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dialog</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="profile-dialog">Profile Dialog<a class="td-heading-self-link" href="#profile-dialog" aria-label="Heading self-link"></a></h2> <h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/dialog.html" title="Dialog example" loading="lazy" scrolling="no" style="height: 420px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Dialog<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile={name:&#39;Pedro Duarte&#39;,username:&#39;@peduarte&#39;}; savedName=&#39;Pedro Duarte&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dialog-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dialog&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">commandfor</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog-content&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">command</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;show-modal&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Edit profile </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dialog</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog-content&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">closedby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;any&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog-title&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-describedby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog-description&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Edit profile<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog-description&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Make changes to your profile here. Click save when you&#39;re done. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">form</span> <span style="color:#c4a000">method</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dialog&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dialog-name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Name<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dialog-name&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile.name&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dialog-username&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Username<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dialog-username&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile.username&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">footer</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">commandfor</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog-content&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">command</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;close&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Cancel </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">commandfor</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog-content&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">command</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;close&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;savedName=profile.name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Save changes </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">footer</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">commandfor</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;profile-dialog-content&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">command</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;close&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ghost&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;none&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;currentColor&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">stroke-width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;M18 6 6 18&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">path</span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;m6 6 12 12&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Close<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dialog</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dialog-output&#34;</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;polite&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Saved profile: <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">ng-bind</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;savedName&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="close-controls">Close Controls<a class="td-heading-self-link" href="#close-controls" aria-label="Heading self-link"></a></h2> <p>Corner and footer close actions are distinct, and the corner control can be omitted without changing modal behavior.</p>inputhttps://angular-wave.github.io/angular.css/docs/elements/input/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/input/<p>Use a native <code>input</code>. AngularCSS styles data-entry input types directly, while the browser and AngularTS own values, events, validation, required state, disabled state, and form behavior.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Jane Doe&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Disabled&#34;</span> <span style="color:#c4a000">disabled</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span></code></pre></div><p>Use the native <code>size</code> attribute when a compact control should size to its content. The control retains a <code>max-width</code> of <code>100%</code>; browsers without <code>field-sizing</code> use the requested number of visible characters.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Compact&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;7&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/input.html" title="Input examples" loading="lazy" scrolling="no" style="height: 220px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Input<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;search=&#39;&#39;; status=&#39;&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stack&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-input-search&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Search<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-input-search&#34;</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Search&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;search&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Value: {{ search ? search : &#34;empty&#34; }} <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-input-compact&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Content-sized<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-input-compact&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Compact&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;7&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-input-disabled&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Disabled<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-input-disabled&#34;</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Disabled&#34;</span> <span style="color:#c4a000">disabled</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-input-invalid&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Invalid<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-input-invalid&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Invalid&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-invalid</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-input-file&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>File<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-input-file&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;file&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="workflows">Workflows<a class="td-heading-self-link" href="#workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/input-workflows.html" title="Input workflows" loading="lazy" scrolling="no" style="height: 1900px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Input Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState={basic:&#39;&#39;,apiKey:&#39;&#39;,username:&#39;&#39;,name:&#39;&#39;,email:&#39;&#39;,firstName:&#39;&#39;,lastName:&#39;&#39;,search:&#39;&#39;,website:&#39;&#39;,required:&#39;&#39;,country:&#39;us&#39;,formName:&#39;&#39;,formEmail:&#39;&#39;,phone:&#39;&#39;,address:&#39;&#39;,message:&#39;Ready&#39;}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow-grid&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Input workflows&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-basic&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.basic&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Enter text&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Basic input&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-demo&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-demo-api-key&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>API Key<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-demo-api-key&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;password&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.apiKey&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sk-...&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Your API key is encrypted and stored securely.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-disabled&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-demo-disabled&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Email<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-demo-disabled&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">disabled</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>This field is currently disabled.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-invalid&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-invalid-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Invalid Input<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-invalid-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Error&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-invalid</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>This field contains validation errors.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-required&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-required-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Required Field <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-required-mark&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>*<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-required-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.required&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;This field is required&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">required</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>This field must be filled out.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-file&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-picture&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Picture<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-picture&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;file&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Select a picture to upload.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-field&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-field-username&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Username<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-field-username&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.username&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Enter your username&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Choose a unique username for your account.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-badge&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-webhook&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Webhook URL </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;secondary&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-label-badge badge&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span>Beta<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-webhook&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;url&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;https://api.example.com/webhook&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-grid&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow input-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-name-grid field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-first-name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>First Name<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-first-name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.firstName&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Jordan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-last-name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Last Name<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-last-name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.lastName&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Lee&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-inline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow input-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-inline-demo field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;search&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.search&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Search...&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Inline search&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.message=&#39;Search &#39;+inputState.search&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Search </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-button-group&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-button-group-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Search<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-button-group-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Type to search...&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.message=&#39;Button group search&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Search </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-input-group&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-group-url&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Website URL<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-group-url&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.website&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;example.com&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>https://<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Website URL information&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>ⓘ<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">form</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-fieldgroup&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow input-workflow-form&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-submit</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.message=&#39;Submitted &#39;+inputState.name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldgroup-name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Name<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldgroup-name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Jordan Lee&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldgroup-email&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Email<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;fieldgroup-email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;name@example.com&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>We&#39;ll send updates to this address.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-form-actions field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;reset&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.name=&#39;&#39;;inputState.email=&#39;&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Reset<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;submit&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Submit<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">form</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-form&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow input-workflow-form input-workflow-form-large&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-submit</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.message=&#39;Contact submitted &#39;+inputState.formName&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;form-name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Name<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;form-name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.formName&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Evil Rabbit&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">required</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;form-email&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Email<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;form-email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.formEmail&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;john@example.com&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>We&#39;ll never share your email with anyone.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-name-grid&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;form-phone&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Phone<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;form-phone&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;tel&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.phone&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;+1 (555) 123-4567&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;form-country&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Country<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">select</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;form-country&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.country&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;us&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>United States<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;uk&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>United Kingdom<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ca&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Canada<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">select</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;form-address&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Address<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;form-address&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.address&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;123 Main St&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-form-actions field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inputState.message=&#39;Cancelled&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Cancel<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;submit&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Submit<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-rtl-api-key&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>مفتاح API<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-rtl-api-key&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;password&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sk-...&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>مفتاح API الخاص بك مشفر ومخزن بأمان.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-workflow-output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> {{ inputState.message }} <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>kbdhttps://angular-wave.github.io/angular.css/docs/elements/kbd/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/kbd/<p>Use native <code>kbd</code> elements. Place related keys next to each other in a <code>span</code>.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span>Ctrl<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span>K<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/kbd.html" title="Kbd example" loading="lazy" scrolling="no" style="height: 150px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Kbd<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;kbdAction=&#39;Ready&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;kbd-button kbd-demo kbd-input-group kbd-rtl kbd-tooltip&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;kbd-row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Open command menu<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span>Ctrl<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span>K<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>or<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">kbd</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Slash&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>/<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;kbdAction=&#39;Saved&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Save changes </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span>Ctrl<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span>S<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;input-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Search...&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Search with shortcut&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;inline-end&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span>⌘K<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">ng-tooltip</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Keyboard help<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">side</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;top&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Press <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span>?<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span> to open help.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;kbd-row&#34;</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>فتح قائمة الأوامر<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span>Ctrl<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;</span>K<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">kbd</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;kbd-output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>{{ kbdAction }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>labelhttps://angular-wave.github.io/angular.css/docs/elements/label/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/label/<p>Use a native <code>label</code> and connect it with <code>for</code>.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Email<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span> <span style="color:#c4a000">required</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/label.html" title="Label examples" loading="lazy" scrolling="no" style="height: 190px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Label<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;labelTerms=false;labelTermsRtl=false&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label-demo label-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">form</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label-control-contract&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Label state contract&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Email<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Email&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Name<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;name&#34;</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Name&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">form</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label-checkbox-demo&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Label checkbox&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label-terms&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;labelTerms&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label-terms&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Accept terms and conditions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label-checkbox-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;تسمية خانة الاختيار&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label-terms-rtl&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;labelTermsRtl&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label-terms-rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>قبول الشروط والأحكام<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label-output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Terms: {{ labelTerms ? &#39;accepted&#39; : &#39;not accepted&#39; }} · الشروط: {{ </span></span><span style="display:flex;"><span> labelTermsRtl ? &#39;مقبولة&#39; : &#39;غير مقبولة&#39; }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>progresshttps://angular-wave.github.io/angular.css/docs/elements/progress/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/progress/<p>Use native <code>progress</code>. Compose its label and value with native <code>label</code> and <code>output</code> elements when needed.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;upload-progress-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Upload progress<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span>56%<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">progress</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;upload-progress-label&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">progress</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/progress.html" title="Progress example" loading="lazy" scrolling="no" style="height: 190px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Progress<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/progress-demo.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progressDemo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-controller</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ProgressDemoController&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-demo progress-label&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-timed-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-timed-title&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Loading progress </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">progress</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ demoValue }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-timed-title&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-demo-timed&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">progress</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-demo-labeled&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;upload-progress-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Upload progress <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;upload-progress&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>56%<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">progress</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;upload-progress&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;upload-progress-label&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">progress</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="controlled-and-rtl">Controlled and RTL<a class="td-heading-self-link" href="#controlled-and-rtl" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/progress-workflows.html" title="Progress workflows" loading="lazy" scrolling="no" style="height: 300px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Progress Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progressWorkflow={controlled:50}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-controlled progress-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-workflows visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-controlled-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;workflow-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-controlled-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Controlled<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-controlled-slider&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> {{ progressWorkflow.controlled }}% </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">progress</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ progressWorkflow.controlled }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-controlled-title&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">progress</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-range-slider</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progress-controlled-slider&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;range&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">min</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">step</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;progressWorkflow.controlled&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Progress value&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl-upload-progress-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> تقدم الرفع <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl-upload-progress&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>٥٦%<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">progress</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl-upload-progress&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;56&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl-upload-progress-label&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">progress</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>radio-grouphttps://angular-wave.github.io/angular.css/docs/elements/radio-group/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/radio-group/<p>Use a native <code>fieldset</code> with a <code>legend</code> and radio inputs. AngularCSS recognizes the semantic group and styles its native radio descendants directly.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;default&#34;</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;default&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;default&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Default<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/radio-group.html" title="Radio group example" loading="lazy" scrolling="no" style="height: 240px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Radio Group<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density=&#39;comfortable&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-group-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Density<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density-default&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;default&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density-default&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Default<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density-comfortable&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;comfortable&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density-comfortable&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Comfortable<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density-compact&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;compact&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density-compact&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Compact<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;polite&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Selected: <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">ng-bind</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="reference-workflows">Reference Workflows<a class="td-heading-self-link" href="#reference-workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/radio-group-workflows.html" title="Radio group workflows" loading="lazy" scrolling="no" style="height: 1320px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Radio Group Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;planType=&#39;plus&#39;; densityDescription=&#39;comfortable&#39;; disabledChoice=&#39;option2&#39;; subscription=&#39;monthly&#39;; notification=&#39;email&#39;; rtlDensity=&#39;comfortable&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-group-choice-card radio-group-description radio-group-disabled radio-group-fieldset radio-group-invalid radio-group-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-group-workflows&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-workflow-section&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Plan choice cards&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-choice-list&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;plus-plan&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-choice&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Plus<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> For individuals and small teams. <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;plus-plan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;plan-type&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;plus&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;planType&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pro-plan&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-choice&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Pro<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> For growing businesses. <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pro-plan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;plan-type&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pro&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;planType&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;enterprise-plan&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-choice&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Enterprise<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> For large teams and enterprises. <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;enterprise-plan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;plan-type&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;enterprise&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;planType&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-workflow-section&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Density descriptions&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-description-list&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;desc-r1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density-description&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;default&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;densityDescription&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;desc-r1&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Default<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Standard spacing for most use cases.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;desc-r2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density-description&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;comfortable&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;densityDescription&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;desc-r2&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Comfortable<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>More space between elements.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;desc-r3&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;density-description&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;compact&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;densityDescription&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;desc-r3&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Compact<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Minimal spacing for dense layouts.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-workflow-section&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Disabled radio&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-simple-list&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-choice&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;option1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">disabled</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabledChoice&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-1&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-plain-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Disabled <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-choice&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;option2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabledChoice&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-2&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-plain-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Option 2 <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-3&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-choice&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;option3&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabledChoice&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-3&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-plain-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Option 3 <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-workflow-section&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Subscription fieldset&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-fieldset field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Subscription Plan<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Yearly and lifetime plans offer significant savings.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;plan-monthly&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;monthly&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;plan-monthly&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-plain-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Monthly ($9.99/month) </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;plan-yearly&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;yearly&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;plan-yearly&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-plain-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Yearly ($99.99/year) </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;plan-lifetime&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;lifetime&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;plan-lifetime&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-plain-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Lifetime ($299.99) </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-workflow-section&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Invalid radio group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-fieldset field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Notification Preferences<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Choose how you want to receive notifications.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid-email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;notification&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;email&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-invalid</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;notification&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid-email&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-plain-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Email only </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid-sms&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;notification&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sms&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-invalid</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;notification&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid-sms&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-plain-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> SMS only </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid-both&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;notification&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;both&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-invalid</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;notification&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid-both&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-plain-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Both Email <span style="color:#ce5c00">&amp;amp;</span> SMS </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-workflow-section&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;RTL density options&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-description-list&#34;</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;r1-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl-density&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;default&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDensity&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;r1-rtl&#34;</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>افتراضي<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>تباعد قياسي لمعظم حالات الاستخدام.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;r2-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl-density&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;comfortable&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDensity&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;r2-rtl&#34;</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>مريح<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>مساحة أكبر بين العناصر.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;r3-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl-density&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;compact&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDensity&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;r3-rtl&#34;</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>مضغوط<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>تباعد أدنى للتخطيطات الكثيفة.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="field-compositions">Field Compositions<a class="td-heading-self-link" href="#field-compositions" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/radio-fields.html" title="Radio fields" loading="lazy" scrolling="no" style="height: 1180px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Radio Fields<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields={subscription:&#39;free&#39;,battery:&#39;&#39;,security:&#39;&#39;,unlock:&#39;&#39;,invalid:&#39;&#39;,disabled:&#39;&#39;}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-fields&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-fields-demo visual-example field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label&#34;</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Subscription Plan </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-free&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription-plan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;free&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.subscription&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-free&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-plain-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Free Plan <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-pro&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription-plan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;pro&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.subscription&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-pro&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-plain-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Pro Plan <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-enterprise&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;subscription-plan&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;enterprise&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.subscription&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-enterprise&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-plain-label&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Enterprise </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span> <span style="color:#c4a000">aria-describedby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;battery-description&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label&#34;</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;battery-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Battery Level<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;battery-description&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Choose your preferred battery level.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;battery-high&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;battery-level&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;high&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.battery&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;battery-high&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>High<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;battery-medium&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;battery-level&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;medium&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.battery&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;battery-medium&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Medium<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;battery-low&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;battery-level&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;low&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.battery&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;battery-low&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Low<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-fields-content-list&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Device security&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-content-1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;device-security&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;touch&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.security&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-content-1&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Enable Touch ID<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Enable Touch ID to quickly unlock your device.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-content-2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;device-security&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;biometric&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.security&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-content-2&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Enable Touch ID and Face ID to make it even faster to unlock your </span></span><span style="display:flex;"><span> device. This is a long label to test the layout. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Enable Touch ID to quickly unlock your device.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-fields-title-list&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Device unlock&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-title-1&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-title-1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;device-unlock&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;touch&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.unlock&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Enable Touch ID<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> Enable Touch ID to quickly unlock your device. <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-title-2&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-title-2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;device-unlock&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;biometric&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.unlock&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Enable Touch ID and Face ID to make it even faster to unlock </span></span><span style="display:flex;"><span> your device. This is a long label to test the layout. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> Enable Touch ID to quickly unlock your device. <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label&#34;</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Invalid Radio Group<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-invalid-1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid-choice&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-invalid</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.invalid&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-invalid-1&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Invalid Option 1 <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-invalid-2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid-choice&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invalid2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-invalid</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.invalid&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-invalid-2&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Invalid Option 2 <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">fieldset</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-set&#34;</span> <span style="color:#c4a000">disabled</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">legend</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;label&#34;</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-title&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Disabled Radio Group </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">legend</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-disabled-1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-choice&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.disabled&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-disabled-1&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Disabled Option 1 <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-disabled-2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled-choice&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;disabled2&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radioFields.disabled&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;radio-disabled-2&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Disabled Option 2 <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">fieldset</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>rangehttps://angular-wave.github.io/angular.css/docs/elements/range/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/range/<p>Use a native range input directly. AngularCSS adds presentation but registers no directive.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;volume&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Volume<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;volume&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;range&#34;</span> <span style="color:#c4a000">min</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;volume&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;volume&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>{{ volume }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/range.html" title="Range example" loading="lazy" scrolling="no" style="height: 220px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Range<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;volume = 75&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;slider-demo slider-disabled&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;volume&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Volume<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;volume&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>{{ volume }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;volume&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;range&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">min</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">step</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;volume&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;volume-disabled&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Muted<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;volume-disabled&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>50<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;volume-disabled&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;range&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">min</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">max</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;100&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">step</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;50&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">disabled</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>scroll-areahttps://angular-wave.github.io/angular.css/docs/elements/scroll-area/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/scroll-area/<p>Apply <code>.scroll-area</code> to a bounded semantic region. Add <code>tabindex=&quot;0&quot;</code> when the region should be directly reachable by keyboard.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-area&#34;</span> <span style="color:#c4a000">tabindex</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Release notes&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Scrollable content goes here.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><p>The browser owns keyboard, wheel, touch, pointer, RTL, and scrollbar behavior. AngularTS may add or remove content; native layout updates overflow geometry.</p> <h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/scroll-area.html" title="Scroll area example" loading="lazy" scrolling="no" style="height: 300px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Scroll Area<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-demo scroll-area&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">tabindex</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Release tags&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stack-sm&#34;</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;padding: 16px; min-width: 34rem&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span>Tags<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h3</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.50<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.49<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.48<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.47<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.46<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.45<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="workflows">Workflows<a class="td-heading-self-link" href="#workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/scroll-area-workflows.html" title="Scroll area layout and state workflows" loading="lazy" scrolling="no" style="height: 1260px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Scroll Area Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;showOverflow = false; scrollDirection = &#39;rtl&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-area-demo scroll-area-horizontal-demo scroll-area-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-area-workflows visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-area-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-tags-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-tags-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Tags<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-area scroll-area-tags&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;vertical-scroll-area&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">tabindex</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Release tags&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-tag-list&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.50<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.49<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.48<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.47<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.46<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.45<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.44<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.43<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.42<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.41<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.40<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.39<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-area-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-art-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-art-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Artwork<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-area scroll-area-artwork&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal-scroll-area&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">tabindex</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Featured artists&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-artwork-row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/01.png&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Portrait by Ornella Binni&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figcaption</span><span style="color:#000;font-weight:bold">&gt;</span>Photo by <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Ornella Binni<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">figcaption</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/02.png&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Portrait by Tom Byrom&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figcaption</span><span style="color:#000;font-weight:bold">&gt;</span>Photo by <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Tom Byrom<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">figcaption</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/03.png&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Portrait by Vladimir Malyavko&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figcaption</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Photo by <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Vladimir Malyavko<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figcaption</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">img</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../images/avatars/04.png&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">alt</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Portrait by Sarah Chen&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figcaption</span><span style="color:#000;font-weight:bold">&gt;</span>Photo by <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Sarah Chen<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">figcaption</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-area-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-dynamic-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-dynamic-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Dynamic content<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;showOverflow = !showOverflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> {{ showOverflow ? &#39;Remove content&#39; : &#39;Add content&#39; }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-area scroll-area-dynamic&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dynamic-scroll-area&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">tabindex</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Dynamic release notes&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-dynamic-content&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Current release<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;showOverflow&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-dynamic-overflow&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Compatibility notes<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Migration details<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>API changes<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Resolved issues<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-area-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-labelledby</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-rtl-heading&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">h2</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-rtl-heading&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>العلامات<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">h2</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scrollDirection = scrollDirection === &#39;rtl&#39; ? &#39;ltr&#39; : &#39;rtl&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Change direction </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">header</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-area scroll-area-tags&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl-scroll-area&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ scrollDirection }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">tabindex</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;علامات الإصدار&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;scroll-tag-list&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.50<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.49<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.48<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.47<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.46<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.45<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.44<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>v1.2.0-beta.43<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>selecthttps://angular-wave.github.io/angular.css/docs/elements/select/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/select/<p>Use a native <code>select</code> directly and bind application state with AngularTS <code>ng-model</code>. No wrapper or styling class is required.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">select</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;status&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;status&#34;</span> <span style="color:#c4a000">required</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Select a status<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span>Todo<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span>Done<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">select</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/select.html" title="Select example" loading="lazy" scrolling="no" style="height: 400px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Select<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;status=&#39;&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stack-sm visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;status&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Status<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">select</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;status&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;status&#34;</span> <span style="color:#c4a000">required</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span> <span style="color:#c4a000">value</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Select a status<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span>Todo<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span>In progress<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span>Done<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">option</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">select</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Current: {{ status || &#39;none&#39; }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>separatorhttps://angular-wave.github.io/angular.css/docs/elements/separator/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/separator/<p>Use a native <code>hr</code> for a horizontal separator. Add <code>aria-orientation=&quot;vertical&quot;</code> only when it is presented as a vertical divider.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#c4a000">aria-orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;vertical&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/separator.html" title="Separator example" loading="lazy" scrolling="no" style="height: 190px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Separator<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;separator-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;separator-demo&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;separator-copy-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;muted&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>HTML-first styles for enterprise applications<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> A set of beautifully designed components that you can customize, </span></span><span style="display:flex;"><span> extend, and build on. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;separator-list&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;separator-list-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dl</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span>Item 1<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span>Value 1<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dl</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dl</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span>Item 2<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span>Value 2<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dl</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dl</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span>Item 3<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dt</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span>Value 3<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dd</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">dl</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;separator-menu&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;separator-menu-demo&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Settings<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Manage preferences<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#c4a000">aria-orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;vertical&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Account<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Profile <span style="color:#ce5c00">&amp;amp;</span> security<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#c4a000">aria-orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;vertical&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Help<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span>Support <span style="color:#ce5c00">&amp;amp;</span> docs<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">nav</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;separator-vertical&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;separator-nav-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Resource links&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#blog&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Blog<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#c4a000">aria-orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;vertical&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#docs&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Docs<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#c4a000">aria-orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;vertical&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">a</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;#source&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Source<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">a</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">nav</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;separator-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;separator-copy-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;muted&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>الأساس لنظام التصميم الخاص بك<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> مجموعة من المكونات المصممة بشكل جميل يمكنك تخصيصها وتوسيعها والبناء </span></span><span style="display:flex;"><span> عليها. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>switchhttps://angular-wave.github.io/angular.css/docs/elements/switch/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/switch/<p>Use <code>role=&quot;switch&quot;</code> on a native checkbox. The browser and AngularTS own its checked state, validation, and form behavior.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;airplane-mode&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;airplane-mode&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Airplane mode<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/switch.html" title="Switch example" loading="lazy" scrolling="no" style="height: 220px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Switch<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;mode=false&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch&#34;</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;airplane-mode&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;mode&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;airplane-mode&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Airplane Mode<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span> <span style="color:#c4a000">aria-live</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;polite&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Mode enabled: <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">ng-bind</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;mode&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="reference-workflows">Reference Workflows<a class="td-heading-self-link" href="#reference-workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/switch-workflows.html" title="Switch workflows" loading="lazy" scrolling="no" style="height: 980px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Switch Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;small=false; standard=false; share=false; notifications=true; focus=false; terms=false&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-choice-card switch-description switch-disabled switch-invalid switch-rtl switch-sizes&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-workflows&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-workflow-section&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Switch sizes&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-size-list field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-size-sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;small&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-size-sm&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Small<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-size-default&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;default&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;standard&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-size-default&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Default<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-workflow-section&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Disabled switch&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-disabled-unchecked&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">disabled</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-disabled-unchecked&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Disabled<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-workflow-section&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Switch description&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-focus-mode&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Share across devices<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Focus is shared across devices, and turns off when you leave the </span></span><span style="display:flex;"><span> app. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-focus-mode&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;focus&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-workflow-section&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Invalid switch&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-terms&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> Accept terms and conditions <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>You must accept the terms and conditions to continue.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-terms&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-invalid</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;terms&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-workflow-section switch-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Switch choice cards&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-choice-list field-group&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-share&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-choice&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Share across devices<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Focus is shared across devices, and turns off when you leave </span></span><span style="display:flex;"><span> the app. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-share&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;share&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-notifications&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-choice&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span>Enable notifications<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">strong</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Receive notifications when focus mode is enabled or disabled. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">small</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-notifications&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;notifications&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-workflow-section switch-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;RTL switch&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">orientation</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;horizontal&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-focus-mode-rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> المشاركة عبر الأجهزة <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> يتم مشاركة التركيز عبر الأجهزة، ويتم إيقاف تشغيله عند مغادرة </span></span><span style="display:flex;"><span> التطبيق. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">role</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;switch-focus-mode-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>tablehttps://angular-wave.github.io/angular.css/docs/elements/table/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/table/<p>Use a native table inside a <code>figure</code>. AngularCSS styles its semantic table structure directly.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Invoice<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/table.html" title="Table example" loading="lazy" scrolling="no" style="height: 340px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Table<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> <span style="color:#c4a000">ng-cloak</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">caption</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> A list of recent invoices. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">caption</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Invoice<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Status<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Method<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right&#34;</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Amount<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>INV001<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>Paid<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>Card<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>$250.00<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>INV002<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>Pending<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>PayPal<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>$150.00<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>INV003<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>Unpaid<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>Transfer<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>$350.00<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tfoot</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">colspan</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;3&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Total<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>$750.00<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tfoot</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <h2 id="workflows">Workflows<a class="td-heading-self-link" href="#workflows" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/table-workflows.html" title="Table workflows" loading="lazy" scrolling="no" style="height: 2400px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Table Workflows<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invoices=[{id:&#39;INV001&#39;,status:&#39;Paid&#39;,method:&#39;Credit Card&#39;,amount:&#39;$250.00&#39;},{id:&#39;INV002&#39;,status:&#39;Pending&#39;,method:&#39;PayPal&#39;,amount:&#39;$150.00&#39;},{id:&#39;INV003&#39;,status:&#39;Unpaid&#39;,method:&#39;Bank Transfer&#39;,amount:&#39;$350.00&#39;},{id:&#39;INV004&#39;,status:&#39;Paid&#39;,method:&#39;Credit Card&#39;,amount:&#39;$450.00&#39;},{id:&#39;INV005&#39;,status:&#39;Paid&#39;,method:&#39;PayPal&#39;,amount:&#39;$550.00&#39;},{id:&#39;INV006&#39;,status:&#39;Pending&#39;,method:&#39;Bank Transfer&#39;,amount:&#39;$200.00&#39;},{id:&#39;INV007&#39;,status:&#39;Unpaid&#39;,method:&#39;Credit Card&#39;,amount:&#39;$300.00&#39;}];products=[{name:&#39;Wireless Mouse&#39;,price:&#39;$29.99&#39;},{name:&#39;Mechanical Keyboard&#39;,price:&#39;$129.99&#39;},{name:&#39;USB-C Hub&#39;,price:&#39;$49.99&#39;}];payments=[{id:&#39;m5gr84i9&#39;,amount:&#39;$316.00&#39;,status:&#39;success&#39;,statusAr:&#39;ناجح&#39;,email:&#39;ken99@example.com&#39;,selected:false},{id:&#39;3u1reuv4&#39;,amount:&#39;$242.00&#39;,status:&#39;success&#39;,statusAr:&#39;ناجح&#39;,email:&#39;Abe45@example.com&#39;,selected:false},{id:&#39;derv1ws0&#39;,amount:&#39;$837.00&#39;,status:&#39;processing&#39;,statusAr:&#39;قيد المعالجة&#39;,email:&#39;Monserrat44@example.com&#39;,selected:false},{id:&#39;5kma53ae&#39;,amount:&#39;$874.00&#39;,status:&#39;success&#39;,statusAr:&#39;ناجح&#39;,email:&#39;Silas22@example.com&#39;,selected:false},{id:&#39;bhqecj4p&#39;,amount:&#39;$721.00&#39;,status:&#39;failed&#39;,statusAr:&#39;فشل&#39;,email:&#39;carmella@example.com&#39;,selected:false}];dataState={query:&#39;&#39;,order:&#39;email&#39;,all:false,selected:0,showStatus:true,showEmail:true,showAmount:true};rtlDataState={query:&#39;&#39;,order:&#39;email&#39;,all:false,showStatus:true,showEmail:true,showAmount:true};tableState={action:&#39;Ready&#39;}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;table-workflow-grid&#34;</span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Table workflows&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;table-workflow table-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;table-demo table-footer&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Recent invoices&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">caption</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> A list of your recent invoices. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">caption</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Invoice<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Status<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Method<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Amount<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span> <span style="color:#c4a000">ng-repeat</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;invoice in invoices&#34;</span> <span style="color:#c4a000">animate</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>{{ invoice.id }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>{{ invoice.status }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>{{ invoice.method }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>{{ invoice.amount }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tfoot</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">colspan</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;3&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Total<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>$2,500.00<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tfoot</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;table-workflow table-actions-example&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;table-actions&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Product actions&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Product<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Price<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Actions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span> <span style="color:#c4a000">ng-repeat</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;product in products&#34;</span> <span style="color:#c4a000">animate</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>{{ product.name }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>{{ product.price }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">ng-dropdown-menu</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;table-action-menu&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ghost&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-xs&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Open menu for {{ product.name }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;0 0 24 24&#34;</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;5&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">circle</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">circle</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">circle</span> <span style="color:#c4a000">cx</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;19&#34;</span> <span style="color:#c4a000">cy</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;12&#34;</span> <span style="color:#c4a000">r</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">circle</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;tableState.action=&#39;Edit &#39;+product.name&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Edit </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;tableState.action=&#39;Duplicate &#39;+product.name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Duplicate </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">hr</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;destructive&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;tableState.action=&#39;Delete &#39;+product.name&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Delete </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;table-workflow&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;table-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;جدول الفواتير&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">caption</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> قائمة بفواتيرك الأخيرة. </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">caption</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>الفاتورة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>الحالة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>الطريقة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-start&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>المبلغ<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>INV001<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>مدفوع<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>بطاقة ائتمانية<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>$250.00<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>INV002<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>قيد الانتظار<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>PayPal<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>$150.00<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>INV003<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>غير مدفوع<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>تحويل بنكي<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>$350.00<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tfoot</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">colspan</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;3&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>المجموع<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span>$2,500.00<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tfoot</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;table-workflow table-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-demo&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Payments data table&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-toolbar&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.query&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Filter emails...&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Filter payment emails&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">ng-dropdown-menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Columns <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>⌄<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-checked</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ dataState.showStatus }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.showStatus=!dataState.showStatus&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Status </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-checked</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ dataState.showEmail }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.showEmail=!dataState.showEmail&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Email </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-checked</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ dataState.showAmount }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.showAmount=!dataState.showAmount&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Amount </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-frame&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-select&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.all&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-change</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;payments[0].selected=dataState.all;payments[1].selected=dataState.all;payments[2].selected=dataState.all;payments[3].selected=dataState.all;payments[4].selected=dataState.all&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Select all payments&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.showStatus&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Status<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.showEmail&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ghost&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.order=dataState.order===&#39;email&#39; ? &#39;-email&#39; : &#39;email&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Email <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>↕<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.showAmount&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Amount </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Actions<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-repeat</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;payment in payments | filter:dataState.query | orderBy:dataState.order&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">animate</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-selected</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ payment.selected }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-select&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;payment.selected&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-change</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.selected=payment.selected ? 1 : 0&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Select {{ payment.email }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.showStatus&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;capitalize&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> {{ payment.status }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.showEmail&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;lowercase&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> {{ payment.email }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;dataState.showAmount&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right table-cell-medium&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> {{ payment.amount }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;text-right&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ghost&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-xs&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;tableState.action=&#39;Open &#39;+payment.id&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Open menu for {{ payment.email }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> ••• </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;!(payments | filter:dataState.query).length&#34;</span> <span style="color:#c4a000">animate</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">colspan</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;5&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-empty&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>No results.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-footer&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>{{ dataState.selected }} of 5 row(s) selected.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">disabled</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Previous<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">disabled</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Next </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">section</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;table-workflow table-workflow-wide&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;جدول بيانات المدفوعات&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlPayments=[{amount:&#39;$316.00&#39;,statusAr:&#39;ناجح&#39;,email:&#39;ken99@example.com&#39;,selected:false},{amount:&#39;$242.00&#39;,statusAr:&#39;ناجح&#39;,email:&#39;Abe45@example.com&#39;,selected:false},{amount:&#39;$837.00&#39;,statusAr:&#39;قيد المعالجة&#39;,email:&#39;Monserrat44@example.com&#39;,selected:false},{amount:&#39;$874.00&#39;,statusAr:&#39;ناجح&#39;,email:&#39;Silas22@example.com&#39;,selected:false},{amount:&#39;$721.00&#39;,statusAr:&#39;فشل&#39;,email:&#39;carmella@example.com&#39;,selected:false}]&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-toolbar&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDataState.query&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;تصفية البريد الإلكتروني...&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;تصفية البريد الإلكتروني&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">ng-dropdown-menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> الأعمدة <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>⌄<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-checked</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ rtlDataState.showStatus }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDataState.showStatus=!rtlDataState.showStatus&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> الحالة </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-checked</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ rtlDataState.showEmail }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDataState.showEmail=!rtlDataState.showEmail&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> البريد الإلكتروني </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-checked</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;{{ rtlDataState.showAmount }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDataState.showAmount=!rtlDataState.showAmount&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> المبلغ </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">menu</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">figure</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-frame&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-select&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDataState.all&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;تحديد الكل&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDataState.showStatus&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>الحالة<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDataState.showEmail&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ghost&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDataState.order=rtlDataState.order===&#39;email&#39; ? &#39;-email&#39; : &#39;email&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> البريد الإلكتروني <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">aria-hidden</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>↕<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDataState.showAmount&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>المبلغ<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">th</span> <span style="color:#c4a000">scope</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;col&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visually-hidden&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>الإجراءات<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">th</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">thead</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-repeat</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;payment in rtlPayments | filter:rtlDataState.query | orderBy:rtlDataState.order&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">animate</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-select&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">input</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;checkbox&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;payment.selected&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;تحديد {{ payment.email }}&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDataState.showStatus&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>{{ payment.statusAr }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDataState.showEmail&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;lowercase&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> {{ payment.email }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlDataState.showAmount&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;table-cell-medium&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> {{ payment.amount }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ghost&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;icon-xs&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-label</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;فتح القائمة&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> ••• </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">tr</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-if</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;!(rtlPayments | filter:rtlDataState.query).length&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">animate</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">td</span> <span style="color:#c4a000">colspan</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;5&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-empty&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>لا توجد نتائج.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">td</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tr</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">tbody</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">table</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">figure</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;data-table-footer&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>0 من 5 صف(وف) محدد.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;row&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">disabled</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> السابق<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">variant</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;outline&#34;</span> <span style="color:#c4a000">size</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sm&#34;</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">disabled</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> التالي </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">section</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;table-workflow-output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>{{ tableState.action }}<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>textareahttps://angular-wave.github.io/angular.css/docs/elements/textarea/Mon, 01 Jan 0001 00:00:00 +0000https://angular-wave.github.io/angular.css/docs/elements/textarea/<p>Use native <code>textarea</code> controls; AngularCSS styles them directly.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">textarea</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Add a message&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">textarea</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">textarea</span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Invalid&#34;</span> <span style="color:#c4a000">aria-invalid</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">textarea</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div><h2 id="example">Example<a class="td-heading-self-link" href="#example" aria-label="Heading self-link"></a></h2> <iframe class="angularcss-example-frame" src="https://angular-wave.github.io/angular.css/examples/components/textarea.html" title="Textarea examples" loading="lazy" scrolling="no" style="height: 240px;" ></iframe> <details class="angularcss-example-source"> <summary>View source</summary> <div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#8f5902;font-style:italic">&lt;!doctype html&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">html</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;en&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">charset</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;utf-8&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">meta</span> <span style="color:#c4a000">name</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;viewport&#34;</span> <span style="color:#c4a000">content</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width=device-width, initial-scale=1&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span>AngularCSS Textarea<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">title</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/preflight.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../css/angular.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;stylesheet&#34;</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../example.css&#34;</span> <span style="color:#000;font-weight:bold">/&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-ts.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;../../js/angular-css.umd.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">head</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">body</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-app</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;angular.css&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-cloak</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-init</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;message=&#39;Ship semantic components&#39;;rtlMessage=&#39;&#39;;textareaAction=&#39;Ready&#39;&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">data-example</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;textarea-button textarea-demo textarea-disabled textarea-field textarea-invalid textarea-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">main</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;visual-example&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-textarea-message&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Message<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">textarea</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-textarea-message&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Add a message&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;message&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">textarea</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>Add context for your request.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-textarea-disabled&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Disabled<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">textarea</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-textarea-disabled&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Disabled&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">disabled</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">textarea</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-textarea-invalid&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Invalid<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">textarea</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-textarea-invalid&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Invalid&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">aria-invalid</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;true&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">textarea</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field-error&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>A message is required.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;textarea-button-demo field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-textarea-reply&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>Reply<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">textarea</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-textarea-reply&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;Type your message here.&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">textarea</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">button</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;button&#34;</span> <span style="color:#c4a000">ng-click</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;textareaAction=&#39;Message sent&#39;&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Send message </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">button</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">dir</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtl&#34;</span> <span style="color:#c4a000">lang</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;ar&#34;</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;field&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">label</span> <span style="color:#c4a000">for</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-textarea-rtl&#34;</span><span style="color:#000;font-weight:bold">&gt;</span>رسالتك<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">label</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">textarea</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;docs-textarea-rtl&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">ng-model</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;rtlMessage&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#c4a000">placeholder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;اكتب رسالتك هنا.&#34;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">textarea</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span>سيتم إرسال رد إلى بريدك الإلكتروني.<span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">p</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">output</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;output textarea-output&#34;</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> Message: {{ message ? message : &#34;empty&#34; }} · {{ textareaAction }} </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">output</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">main</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;/</span><span style="color:#204a87;font-weight:bold">html</span><span style="color:#000;font-weight:bold">&gt;</span> </span></span></code></pre></div> </details> <!-- angularcss-reference:start --> <h2 id="installation">Installation<a class="td-heading-self-link" href="#installation" aria-label="Heading self-link"></a></h2> <p>Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or <code>angular.css</code> module dependency. Add AngularTS when using application bindings such as <code>ng-model</code> or <code>ng-click</code>. See <a href="https://angular-wave.github.io/angular.css/docs/get-started/installation/">Installation</a> for the complete setup.</p>