Toggle Button Group

<sl-toggle-button-group> | SlToggleButtonGroup
Since 1.1.8 stable

Toggle button groups organize toggle buttons to show active state for one toggle button at a time.

Joint Account Sarah Smith Disabled John Smith 
<sl-toggle-button-group>
  <sl-toggle-button>Joint Account</sl-toggle-button>
  <sl-toggle-button>Sarah Smith</sl-toggle-button>
  <sl-toggle-button disabled>Disabled</sl-toggle-button>
  <sl-toggle-button>John Smith</sl-toggle-button>
</sl-toggle-button-group>

Examples

Size

There are 2 sizes: medium and small. Default is small.

Joint Account Sarah Smith John Smith Disabled
Joint Account Sarah Smith John Smith Disabled 
<sl-toggle-button-group size="small">
  <sl-toggle-button>Joint Account</sl-toggle-button>
  <sl-toggle-button>Sarah Smith</sl-toggle-button>
  <sl-toggle-button>John Smith</sl-toggle-button>
  <sl-toggle-button disabled>Disabled</sl-toggle-button>
</sl-toggle-button-group>

<br/>

<sl-toggle-button-group size="medium">
  <sl-toggle-button>Joint Account</sl-toggle-button>
  <sl-toggle-button>Sarah Smith</sl-toggle-button>
  <sl-toggle-button>John Smith</sl-toggle-button>
  <sl-toggle-button disabled>Disabled</sl-toggle-button>
</sl-toggle-button-group>

Alignment

There are 2 alignment settings: horizontal and vertical. Default is horizontal.

Joint Account Sarah Smith John Smith Disabled
Joint Account Sarah Smith John Smith Disabled 
<sl-toggle-button-group alignment="horizontal">
  <sl-toggle-button>Joint Account</sl-toggle-button>
  <sl-toggle-button>Sarah Smith</sl-toggle-button>
  <sl-toggle-button>John Smith</sl-toggle-button>
  <sl-toggle-button disabled>Disabled</sl-toggle-button>
</sl-toggle-button-group>

<br/>

<sl-toggle-button-group alignment="vertical">
  <sl-toggle-button>Joint Account</sl-toggle-button>
  <sl-toggle-button>Sarah Smith</sl-toggle-button>
  <sl-toggle-button>John Smith</sl-toggle-button>
  <sl-toggle-button disabled>Disabled</sl-toggle-button>
</sl-toggle-button-group>

Prefix & Suffix

There are 2 slots prefix and suffix in sl-toggle-button which we can use to add extra icons.

Joint Account Sarah Smith John Smith
Joint Account Sarah Smith John Smith 
<sl-toggle-button-group alignment="horizontal">
  <sl-toggle-button>
    <sl-icon slot="prefix" name="gear"></sl-icon>
    Joint Account
  </sl-toggle-button>
  <sl-toggle-button>
    Sarah Smith
    <sl-icon slot="suffix" name="gear"></sl-icon>
  </sl-toggle-button>
  <sl-toggle-button>
    <sl-icon slot="prefix" name="gear"></sl-icon>
    John Smith
    <sl-icon slot="suffix" name="gear"></sl-icon>
  </sl-toggle-button>
</sl-toggle-button-group>

<br/>

<sl-toggle-button-group alignment="vertical">
  <sl-toggle-button>
    <sl-icon slot="prefix" name="gear"></sl-icon>
    Joint Account
  </sl-toggle-button>
  <sl-toggle-button>
    Sarah Smith
    <sl-icon slot="suffix" name="gear"></sl-icon>
  </sl-toggle-button>
  <sl-toggle-button>
    <sl-icon slot="prefix" name="gear"></sl-icon>
    John Smith
    <sl-icon slot="suffix" name="gear"></sl-icon>
  </sl-toggle-button>
</sl-toggle-button-group>

Icons only

We can use only icons instead of label for toggle buttons content.


<sl-toggle-button-group alignment="horizontal">
  <sl-toggle-button>
    <sl-icon name="gear"></sl-icon>
  </sl-toggle-button>
  <sl-toggle-button>
    <sl-icon name="house"></sl-icon>
  </sl-toggle-button>
  <sl-toggle-button>
    <sl-icon name="check"></sl-icon>
  </sl-toggle-button>
</sl-toggle-button-group>

<br/>

<sl-toggle-button-group alignment="vertical">
  <sl-toggle-button>
    <sl-icon name="gear"></sl-icon>
  </sl-toggle-button>
  <sl-toggle-button>
    <sl-icon name="house"></sl-icon>
  </sl-toggle-button>
  <sl-toggle-button>
    <sl-icon name="check"></sl-icon>
  </sl-toggle-button>
</sl-toggle-button-group>

Overflow

When horizontal toggle button group is overflown, we automatically enable scroll controls.

Toggle Button 1 Toggle Button 2 Toggle Button 3 Toggle Button 4 Toggle Button 5 Toggle Button 6 Toggle Button 7 Toggle Button 8 Toggle Button 9 Toggle Button 10 Toggle Button 11 Toggle Button 12 Toggle Button 13 Toggle Button 14 Toggle Button 15 Toggle Button 16 Toggle Button 17 Toggle Button 18 Toggle Button 19 Toggle Button 20 
<sl-toggle-button-group>
  <sl-toggle-button>Toggle Button 1</sl-toggle-button>
  <sl-toggle-button>Toggle Button 2</sl-toggle-button>
  <sl-toggle-button>Toggle Button 3</sl-toggle-button>
  <sl-toggle-button>Toggle Button 4</sl-toggle-button>
  <sl-toggle-button>Toggle Button 5</sl-toggle-button>
  <sl-toggle-button>Toggle Button 6</sl-toggle-button>
  <sl-toggle-button>Toggle Button 7</sl-toggle-button>
  <sl-toggle-button>Toggle Button 8</sl-toggle-button>
  <sl-toggle-button>Toggle Button 9</sl-toggle-button>
  <sl-toggle-button>Toggle Button 10</sl-toggle-button>
  <sl-toggle-button>Toggle Button 11</sl-toggle-button>
  <sl-toggle-button>Toggle Button 12</sl-toggle-button>
  <sl-toggle-button>Toggle Button 13</sl-toggle-button>
  <sl-toggle-button>Toggle Button 14</sl-toggle-button>
  <sl-toggle-button>Toggle Button 15</sl-toggle-button>
  <sl-toggle-button>Toggle Button 16</sl-toggle-button>
  <sl-toggle-button>Toggle Button 17</sl-toggle-button>
  <sl-toggle-button>Toggle Button 18</sl-toggle-button>
  <sl-toggle-button>Toggle Button 19</sl-toggle-button>
  <sl-toggle-button>Toggle Button 20</sl-toggle-button>
</sl-toggle-button-group>

Fixed scroll controls

Use fixed-scroll-controls attribute to prevent scroll buttons from being hidden when inactive.

Toggle Button 1 Toggle Button 2 Toggle Button 3 Toggle Button 4 Toggle Button 5 Toggle Button 6 Toggle Button 7 Toggle Button 8 Toggle Button 9 Toggle Button 10 Toggle Button 11 Toggle Button 12 Toggle Button 13 Toggle Button 14 Toggle Button 15 Toggle Button 16 Toggle Button 17 Toggle Button 18 Toggle Button 19 Toggle Button 20 
<sl-toggle-button-group fixed-scroll-controls>
  <sl-toggle-button>Toggle Button 1</sl-toggle-button>
  <sl-toggle-button>Toggle Button 2</sl-toggle-button>
  <sl-toggle-button>Toggle Button 3</sl-toggle-button>
  <sl-toggle-button>Toggle Button 4</sl-toggle-button>
  <sl-toggle-button>Toggle Button 5</sl-toggle-button>
  <sl-toggle-button>Toggle Button 6</sl-toggle-button>
  <sl-toggle-button>Toggle Button 7</sl-toggle-button>
  <sl-toggle-button>Toggle Button 8</sl-toggle-button>
  <sl-toggle-button>Toggle Button 9</sl-toggle-button>
  <sl-toggle-button>Toggle Button 10</sl-toggle-button>
  <sl-toggle-button>Toggle Button 11</sl-toggle-button>
  <sl-toggle-button>Toggle Button 12</sl-toggle-button>
  <sl-toggle-button>Toggle Button 13</sl-toggle-button>
  <sl-toggle-button>Toggle Button 14</sl-toggle-button>
  <sl-toggle-button>Toggle Button 15</sl-toggle-button>
  <sl-toggle-button>Toggle Button 16</sl-toggle-button>
  <sl-toggle-button>Toggle Button 17</sl-toggle-button>
  <sl-toggle-button>Toggle Button 18</sl-toggle-button>
  <sl-toggle-button>Toggle Button 19</sl-toggle-button>
  <sl-toggle-button>Toggle Button 20</sl-toggle-button>
</sl-toggle-button-group>

Slots

Name Description
(default) Must be <sl-toggle-button> elements.

Learn more about using slots.

Properties

Name Description Reflects Type Default
alignment The alignment of the toggle buttons. 'horizontal' | 'vertical' 'horizontal'
activation When set to auto, navigating toggle buttons with the arrow keys will instantly active toggle button. When set to manual, the toggle button will receive focus but will not be activated until the user presses spacebar or enter. 'auto' | 'manual' 'manual'
noScrollControls
no-scroll-controls 		Disables the scroll arrows that appear when toggle buttons overflow. boolean false
fixedScrollControls
fixed-scroll-controls 		Prevent scroll buttons from being hidden when inactive. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-toggle-change Emitted when the active toggle button changes. CustomEvent

Learn more about events.

Custom Properties

Name Description Default
--toggle-button-group-gap The gap between toggle buttons.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.
nav The toggle button group’s navigation container where toggle buttons are slotted in.
toggle-buttons The container that wraps the toggle buttons.
active-toggle-button-indicator The active toggle button indicator.
scroll-button The previous/next scroll buttons that show when toggle buttons are scrollable, an <sl-icon-button>.
scroll-button--start The starting scroll button.
scroll-button--end The ending scroll button.
scroll-button__base The scroll button’s exported base part.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>
  • <sl-icon-button>