Accessibility: Partial

Translations: Not Needed

Migration Guide: Not Needed

Toggle Group

Group of toggles for multiple selections

Default

Whatsapp

SMS

Phone

Linkedin

Instagram

Youtube

Facebook

Vue

<template>
  <HLToggleGroup>
    <HLSpace>
      <HLToggle
        v-for="i in options"
        :checkedValue="active"
        :id="'lg-' + i"
        :key="i"
        :value="i"
        :label="i"
        @update:value="(val)=>onClick(val,i)"
        @label:click="(eve)=>lableClicked(eve,i)"
        >{{ i }}</HLToggle
      >
    </HLSpace>
  </HLToggleGroup>
</template>
<script setup>
  import { ref } from 'vue'
  import { HLToggle, HLSpace, HLToggleGroup } from '@platform-ui/highrise'

  const options = ['Whatsapp', 'SMS', 'Phone', 'Linkedin', 'Instagram', 'Youtube', 'Facebook']
  const active = ref('Whatsapp')
  const onClick = (val, i) => {
    active.value = i
    if (!val) {
      active.value = true
    }
  }
  const lableClicked = (event, i) => {
    if (active.value == i) {
      active.value = false
    } else {
      active.value = i
    }
  }
</script>

All Sizes

Size: lg

Whatsapp

SMS

Phone

Linkedin

Instagram

Youtube

Facebook

Size: md

Whatsapp

SMS

Phone

Linkedin

Instagram

Youtube

Facebook

Size: sm

Whatsapp

SMS

Phone

Linkedin

Instagram

Youtube

Facebook

Size: xs

Whatsapp

SMS

Phone

Linkedin

Instagram

Youtube

Facebook

Size: 2xs

Whatsapp

SMS

Phone

Linkedin

Instagram

Youtube

Facebook

Size: 3xs

Whatsapp

SMS

Phone

Linkedin

Instagram

Youtube

Facebook

Vue

<template>
  <HLContentWrap fullScreen>
    <HLToggleGroup size="sm">
      <HLSpace>
        <HLToggle
          v-for="i in options"
          :checkedValue="active"
          :id="'lg-' + i"
          :key="i"
          :value="i"
          :label="i"
          @update:value="(val)=>onClick(val,i)"
          @label:click="(eve)=>lableClicked(eve,i)"
        >
          {{ i }}
        </HLToggle>
      </HLSpace>
    </HLToggleGroup>
  </HLContentWrap>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { HLToggle, HLSpace, HLToggleGroup } from '@platform-ui/highrise'

  const options = ['Whatsapp', 'SMS', 'Phone', 'Linkedin', 'Instagram', 'Youtube', 'Facebook']
  const active = ref('Whatsapp')
  const onClick = (val, i) => {
    active.value = i
    if (!val) {
      active.value = true
    }
  }
  const lableClicked = (event, i) => {
    if (active.value == i) {
      active.value = false
    } else {
      active.value = i
    }
  }
</script>

Imports

import { HLToggleGroup, HLToggle, HLSpace } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	Size of all toggles in the group

Slots

Name	Parameters	Description
default	()	The content slot for toggle items