Switch

<afp-switch>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A switch component to toggle between on and off states.

Switch

<div class="afp-grid">
  <afp-switch>Switch</afp-switch>
</div>

<div class="afp-grid">
  <afp-switch>Switch</afp-switch>
</div>

<div class="afp-grid">
  <AfpSwitch>Switch</AfpSwitch>
</div>

<div class="afp-grid">
  <AfpSwitch>Switch</AfpSwitch>
</div>

Examples #

Shapes #

Use the shape attribute to change a switch's shape.

Pill

Rounded

Soft

Square

<div class="afp-cluster afp-align-center">
  <afp-switch shape="pill">Pill</afp-switch>
  <afp-switch shape="rounded">Rounded</afp-switch>
  <afp-switch shape="soft">Soft</afp-switch>
  <afp-switch shape="square">Square</afp-switch>
</div>

<div class="afp-cluster afp-align-center">
  <afp-switch [shape]="'pill'">Pill</afp-switch>
  <afp-switch [shape]="'rounded'">Rounded</afp-switch>
  <afp-switch [shape]="'soft'">Soft</afp-switch>
  <afp-switch [shape]="'square'">Square</afp-switch>
</div>

<div class="afp-cluster afp-align-center">
  <AfpSwitch shape="pill">Pill</AfpSwitch>
  <AfpSwitch shape="rounded">Rounded</AfpSwitch>
  <AfpSwitch shape="soft">Soft</AfpSwitch>
  <AfpSwitch shape="square">Square</AfpSwitch>
</div>

<div class="afp-cluster afp-align-center">
  <AfpSwitch :shape="'pill'">Pill</AfpSwitch>
  <AfpSwitch :shape="'rounded'">Rounded</AfpSwitch>
  <AfpSwitch :shape="'soft'">Soft</AfpSwitch>
  <AfpSwitch :shape="'square'">Square</AfpSwitch>
</div>

Sizes #

Use the size attribute to change a switch's size.

Small

Medium

Large

<div class="afp-cluster afp-align-center">
  <afp-switch size="small">Small</afp-switch>
  <afp-switch size="medium">Medium</afp-switch>
  <afp-switch size="large">Large</afp-switch>
</div>

<div class="afp-cluster afp-align-center">
  <afp-switch [size]="'small'">Small</afp-switch>
  <afp-switch [size]="'medium'">Medium</afp-switch>
  <afp-switch [size]="'large'">Large</afp-switch>
</div>

<div class="afp-cluster afp-align-center">
  <AfpSwitch size="small">Small</AfpSwitch>
  <AfpSwitch size="medium">Medium</AfpSwitch>
  <AfpSwitch size="large">Large</AfpSwitch>
</div>

<div class="afp-cluster afp-align-center">
  <AfpSwitch :size="'small'">Small</AfpSwitch>
  <AfpSwitch :size="'medium'">Medium</AfpSwitch>
  <AfpSwitch :size="'large'">Large</AfpSwitch>
</div>

Hint #

Use the hint attribute to add a hint to the switch.

Switch with hint

<afp-switch hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua">Switch with hint</afp-switch>

<afp-switch [hint]="'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua'">Switch with hint</afp-switch>

<AfpSwitch hint="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua">Switch with hint</AfpSwitch>

<AfpSwitch :hint="'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua'">Switch with hint</AfpSwitch>

Checked #

Use the checked attribute to set the switch to be checked by default.

Checked

<div class="afp-grid">
  <afp-switch checked>Checked</afp-switch>
</div>

<div class="afp-grid">
  <afp-switch checked>Checked</afp-switch>
</div>

<div class="afp-grid">
  <AfpSwitch checked>Checked</AfpSwitch>
</div>

<div class="afp-grid">
  <AfpSwitch checked>Checked</AfpSwitch>
</div>

Disabled #

Use the disabled attribute to disable the switch.

Unchecked

Checked

<div class="afp-cluster afp-align-center">
  <afp-switch disabled>Unchecked</afp-switch>
  <afp-switch disabled checked>Checked</afp-switch>
</div>

<div class="afp-cluster afp-align-center">
  <afp-switch disabled>Unchecked</afp-switch>
  <afp-switch disabled checked>Checked</afp-switch>
</div>

<div class="afp-cluster afp-align-center">
  <AfpSwitch disabled>Unchecked</AfpSwitch>
  <AfpSwitch disabled checked>Checked</AfpSwitch>
</div>

<div class="afp-cluster afp-align-center">
  <AfpSwitch disabled>Unchecked</AfpSwitch>
  <AfpSwitch disabled checked>Checked</AfpSwitch>
</div>

Value #

Use the afp-value-changed event to listen for value changes.

Click me

<afp-switch id="demo-switch" hint="Event output:" value="demo">Click me</afp-switch>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const switchEl = document.querySelector('#demo-switch');

    switchEl.addEventListener('afp-value-changed', (event) => {
      switchEl.hint = `Event output: ${JSON.stringify(event.detail)}`;
    });
  });
</script>

<afp-switch [id]="'demo-switch'" [hint]="'Event output:'" [value]="'demo'">Click me</afp-switch>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const switchEl = document.querySelector('#demo-switch');

    switchEl.addEventListener('afp-value-changed', (event) => {
      switchEl.hint = `Event output: ${JSON.stringify(event.detail)}`;
    });
  });
</script>

<AfpSwitch id="demo-switch" hint="Event output:" value="demo">Click me</AfpSwitch>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const switchEl = document.querySelector('#demo-switch');

    switchEl.addEventListener('afp-value-changed', (event) => {
      switchEl.hint = `Event output: ${JSON.stringify(event.detail)}`;
    });
  });
</script>

<AfpSwitch :id="'demo-switch'" :hint="'Event output:'" :value="'demo'">Click me</AfpSwitch>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const switchEl = document.querySelector('#demo-switch');

    switchEl.addEventListener('afp-value-changed', (event) => {
      switchEl.hint = `Event output: ${JSON.stringify(event.detail)}`;
    });
  });
</script>

Customization #

Use the --afp-switch-color CSS variable to customize the switch color.

Custom Color

<afp-switch style="--afp-switch-color: deeppink">Custom Color</afp-switch>

<afp-switch [style]="'--afp-switch-color: deeppink'">Custom Color</afp-switch>

<AfpSwitch style="--afp-switch-color: deeppink">Custom Color</AfpSwitch>

<AfpSwitch :style="'--afp-switch-color: deeppink'">Custom Color</AfpSwitch>

Properties

Learn more about properties.

Name Description Reflects

checked

value of the switch

Type boolean

Default false

value

value of the switch

Type string

hint

hint text for the switch

Type string

ariaLabel
arialabel

Aria label for the switch. This is used for accessibility purposes to provide a text alternative for screen readers.

Type string

size

size of the switch.

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

shape

shape of the switch

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.PILL

disabled

disabled property of the switch

Type boolean

Default false

Events

Learn more about events.

Name	Return	Description
`afp-focus`	`void`	Emitted when the switch gains focus.
`afp-blur`	`void`	Emitted when the switch loses focus.
`afp-value-changed`	`{value: string; checked: boolean}`	Emitted when the switch value changes.

Slots

Learn more about slots.

Name	Description
`default`	The default slot used for the switch label.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`wrapper`	The wrapper element around the switch component.	`::part(wrapper)`
`base`	The base element of the switch.	`::part(base)`
`slider`	The slider element of the switch.	`::part(slider)`
`label`	The label container of the switch.	`::part(label)`
`hint`	The hint text element of the switch.	`::part(hint)`

CSS Custom Properties

Name	Description	Default
`--afp-switch-disabled-opacity`	The opacity of the switch when disabled.	`0.5`
`--afp-switch-color`	The main color of the switch.	`--afp-color-brand-50`

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/switch/switch.js';