toggle-group

Native radio or checkbox groups with a toggle-button presentation.

Use radios sharing a name for single selection, or checkboxes for independent multiple selection.

<fieldset variant="outline" class="toggle-group">
  <legend class="visually-hidden">Alignment</legend>
  <label>
    <input type="radio" name="alignment" value="left" ng-model="alignment" />
    Left
  </label>
  <label>
    <input type="radio" name="alignment" value="center" ng-model="alignment" />
    Center
  </label>
</fieldset>

Example

View source
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AngularCSS Toggle Group</title>
    <link rel="stylesheet" href="../../css/preflight.css" />
    <link rel="stylesheet" href="../../css/angular.css" />
    <link rel="stylesheet" href="../example.css" />
    <script src="../../js/angular-ts.umd.js"></script>
    <script src="../../js/angular-css.umd.js"></script>
  </head>
  <body ng-app="angular.css" ng-cloak ng-init="alignment='center'">
    <div class="stack-sm">
      <fieldset class="toggle-group visual-example" variant="outline">
        <legend class="visually-hidden">Text alignment</legend>
        <label>
          <input
            type="radio"
            name="alignment"
            value="left"
            ng-model="alignment"
          />
          Left
        </label>
        <label>
          <input
            type="radio"
            name="alignment"
            value="center"
            ng-model="alignment"
          />
          Center
        </label>
        <label>
          <input
            type="radio"
            name="alignment"
            value="right"
            ng-model="alignment"
          />
          Right
        </label>
      </fieldset>
      <output class="output">
        Alignment: <span ng-bind="alignment"></span>
      </output>
    </div>
  </body>
</html>

Workflows

View source
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>AngularCSS Toggle Group Workflows</title>
    <link rel="stylesheet" href="../../css/preflight.css" />
    <link rel="stylesheet" href="../../css/angular.css" />
    <link rel="stylesheet" href="../example.css" />
    <script src="../../js/angular-ts.umd.js"></script>
    <script src="../../js/angular-css.umd.js"></script>
  </head>
  <body
    ng-app="angular.css"
    ng-cloak
    ng-init="fontWeight='normal'; pageDirection='rtl'; bold=true; italic=true"
    data-example="toggle-group-demo toggle-group-disabled toggle-group-font-weight-selector toggle-group-outline toggle-group-rtl toggle-group-sizes toggle-group-spacing toggle-group-vertical"
  >
    <main class="toggle-group-workflows visual-example">
      <section aria-labelledby="toggle-format-heading">
        <header><h2 id="toggle-format-heading">Formatting</h2></header>
        <fieldset
          class="toggle-group"
          variant="outline"
          id="multiple-toggle-group"
        >
          <legend class="visually-hidden">Text formatting</legend>
          <label><input type="checkbox" ng-model="bold" />Bold</label>
          <label><input type="checkbox" ng-model="italic" />Italic</label>
          <label><input type="checkbox" />Underline</label>
        </fieldset>
      </section>

      <section aria-labelledby="toggle-keyboard-heading">
        <header>
          <h2 id="toggle-keyboard-heading">Keyboard navigation</h2>
        </header>
        <fieldset
          class="toggle-group"
          variant="outline"
          id="keyboard-toggle-group"
        >
          <legend class="visually-hidden">Text style</legend>
          <label
            ><input type="radio" name="style" value="bold" checked />Bold</label
          >
          <label
            ><input
              type="radio"
              name="style"
              value="italic"
              disabled
            />Italic</label
          >
          <label
            ><input
              type="radio"
              name="style"
              value="underline"
            />Underline</label
          >
        </fieldset>
      </section>

      <section aria-labelledby="toggle-disabled-heading">
        <header><h2 id="toggle-disabled-heading">Disabled</h2></header>
        <fieldset class="toggle-group" id="disabled-toggle-group" disabled>
          <legend class="visually-hidden">Disabled formatting</legend>
          <label><input type="checkbox" />Bold</label>
          <label><input type="checkbox" />Italic</label>
          <label><input type="checkbox" />Underline</label>
        </fieldset>
      </section>

      <section aria-labelledby="toggle-weight-heading">
        <header><h2 id="toggle-weight-heading">Font weight</h2></header>
        <fieldset
          class="toggle-group"
          variant="outline"
          spacing="2"
          size="lg"
          id="font-weight-toggle-group"
        >
          <legend class="visually-hidden">Font weight</legend>
          <label class="toggle-weight-item"
            ><input
              type="radio"
              name="weight"
              value="light"
              ng-model="fontWeight"
            /><strong style="font-weight: 300">Aa</strong
            ><span>Light</span></label
          >
          <label class="toggle-weight-item"
            ><input
              type="radio"
              name="weight"
              value="normal"
              ng-model="fontWeight"
            /><strong style="font-weight: 400">Aa</strong
            ><span>Normal</span></label
          >
          <label class="toggle-weight-item"
            ><input
              type="radio"
              name="weight"
              value="medium"
              ng-model="fontWeight"
            /><strong style="font-weight: 500">Aa</strong
            ><span>Medium</span></label
          >
          <label class="toggle-weight-item"
            ><input
              type="radio"
              name="weight"
              value="bold"
              ng-model="fontWeight"
            /><strong style="font-weight: 700">Aa</strong
            ><span>Bold</span></label
          >
        </fieldset>
        <output class="output">Selected: font-{{ fontWeight }}</output>
      </section>

      <section aria-labelledby="toggle-sizes-heading">
        <header><h2 id="toggle-sizes-heading">Sizes and spacing</h2></header>
        <div class="toggle-group-size-stack">
          <fieldset class="toggle-group" size="sm" variant="outline">
            <legend class="visually-hidden">Small position</legend>
            <label
              ><input type="radio" name="small-position" checked />Top</label
            >
            <label><input type="radio" name="small-position" />Bottom</label>
          </fieldset>
          <fieldset
            class="toggle-group"
            variant="outline"
            spacing="2"
            id="spaced-toggle-group"
          >
            <legend class="visually-hidden">Spaced position</legend>
            <label
              ><input type="radio" name="spaced-position" checked />Top</label
            >
            <label><input type="radio" name="spaced-position" />Bottom</label>
          </fieldset>
        </div>
      </section>

      <section aria-labelledby="toggle-vertical-heading">
        <header><h2 id="toggle-vertical-heading">Vertical</h2></header>
        <fieldset
          class="toggle-group"
          orientation="vertical"
          spacing="1"
          id="vertical-toggle-group"
        >
          <legend class="visually-hidden">Vertical formatting</legend>
          <label><input type="checkbox" checked />Bold</label>
          <label><input type="checkbox" checked />Italic</label>
          <label><input type="checkbox" />Underline</label>
        </fieldset>
      </section>

      <section
        dir="{{ pageDirection }}"
        lang="ar"
        id="toggle-rtl-shell"
        aria-labelledby="toggle-rtl-heading"
      >
        <header>
          <h2 id="toggle-rtl-heading">اتجاه العرض</h2>
          <button
            type="button"
            variant="outline"
            size="sm"
            ng-click="pageDirection = pageDirection === 'rtl' ? 'ltr' : 'rtl'"
          >
            Change direction
          </button>
        </header>
        <fieldset class="toggle-group" variant="outline" id="rtl-toggle-group">
          <legend class="visually-hidden">طريقة العرض</legend>
          <label
            ><input type="radio" name="view" value="list" checked />قائمة</label
          >
          <label><input type="radio" name="view" value="grid" />شبكة</label>
          <label><input type="radio" name="view" value="cards" />بطاقات</label>
        </fieldset>
      </section>
    </main>
  </body>
</html>

Installation

Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.

This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native radio or checkbox grouping.

Anatomy

Root styling selector

  • .toggle-group

Semantic structure

Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.

API

Attributes and state

AttributeAccessPurpose
orientationAuthoredGroup layout: vertical; omit for the horizontal layout.
sizeAuthoredControl size: sm or lg; omit for the default size.
spacingAuthoredGap in spacing units: 1 or 2; omit to join controls.
variantAuthoredControl presentation: outline; omit for the default style.

Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.

CSS custom properties

VariablePurpose
--toggle-group-gapGap between controls; defaults to 0.

DOM events

This component does not emit a component-specific custom event.

Native DOM events continue to work normally. AngularTS event directives such as ng-click and ng-keydown, plus the data-change model callback, remain application-owned.

Behavior

Toggle Group is a styling-only native fieldset: use radios sharing a name for single selection and checkboxes for multiple selection. The browser owns selection, arrow-key radio navigation, disabled state, focus, validation, and form submission; AngularTS ng-model owns application state. AngularCSS registers no toggle-group directive.

AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.

Accessibility

Use a native button whenever the control performs an action. Keep an accessible name, preserve visible focus, and use disabled for unavailable native controls.

Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.

Customization

Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.

Read Customization for layer order, design tokens, state variants, and iframe demo isolation.


Last modified September 11, 2026: Finalize AngularCSS 0.0.2 release validation (665eaa7)