Accessibility: Work in progress

Translations: Not Needed

Migration Guide: Not Needed

Content Switcher

Content Switcher input component for selecting a single option from multiple choices.

Basic Usage

⚠️ Warning: Content Switcher components must always be wrapped in a HLRadioGroup component. The value passed via v-model:value determines the checked state of the Content Switcher.

Rock'n'Roll Star

Shakermaker

Live Forever

Up in the Sky

Vue

<template>
  <HLRadioGroup id="radio-basic-group" v-model:value="value" name="radioGroup1">
    <HLContentSwitcher v-for="song in songs" :id="'radio-basic-' + song.value" :key="song.value" :value="song.value" :label="song.label" />
  </HLRadioGroup>
</template>
<script setup>
  import { HLContentSwitcher, HLRadioGroup } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref('value1')

  const songs = [
    {
      value: 'value1',
      label: "Rock'n'Roll Star",
    },
    {
      value: 'value2',
      label: 'Shakermaker',
    },
    {
      value: 'value3',
      label: 'Live Forever',
    },
    {
      value: 'value4',
      label: 'Up in the Sky',
    },
  ].map(s => {
    s.value = s.value.toLowerCase()
    return s
  })
</script>

All Sizes

Large

Medium

Small

Extra Small

Double Extra Small

Triple Extra Small

Vue

<template>
  <HLRadioGroup id="radio-size-lg" v-model:value="value" name="radioGroupLg" size="lg">
    <HLContentSwitcher id="radio-lg-option1" value="option1" label="Large" />
  </HLRadioGroup>

  <HLRadioGroup id="radio-size-md" v-model:value="value" name="radioGroupMd" size="md">
    <HLContentSwitcher id="radio-md-option2" value="option2" label="Medium" />
  </HLRadioGroup>

  <HLRadioGroup id="radio-size-sm" v-model:value="value" name="radioGroupSm" size="sm">
    <HLContentSwitcher id="radio-sm-option3" value="option3" label="Small" />
  </HLRadioGroup>

  <HLRadioGroup id="radio-size-xs" v-model:value="value" name="radioGroupXs" size="xs">
    <HLContentSwitcher id="radio-xs-option4" value="option4" label="Extra Small" />
  </HLRadioGroup>

  <HLRadioGroup id="radio-size-2xs" v-model:value="value" name="radioGroupXs" size="2xs">
    <HLContentSwitcher id="radio-2xs-option4" value="option5" label="Double Extra Small" />
  </HLRadioGroup>

  <HLRadioGroup id="radio-size-3xs" v-model:value="value" name="radioGroupXs" size="3xs">
    <HLContentSwitcher id="radio-3xs-option4" value="option6" label="Triple Extra Small" />
  </HLRadioGroup>
</template>
<script setup lang="ts">
  import { HLContentSwitcher, HLRadioGroup } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref('value1')
</script>

Disabled State

Rock'n'Roll Star

Shakermaker

Live Forever

Up in the Sky

Vue

<HLRadioGroup id="radio-disabled-group" v-model:value="value" name="radioGroupDisabled">
  <HLContentSwitcher
    v-for="song in songs"
    :id="'radio-disabled-' + song.value"
    :key="song.value"
    :value="song.value"
    :disabled="song.label === 'Live Forever'"
    :label="song.label"
  />
</HLRadioGroup>

TS

const songs = [
  {
    value: 'value1',
    label: "Rock'n'Roll Star",
  },
  {
    value: 'value2',
    label: 'Shakermaker',
  },
  {
    value: 'value3',
    label: 'Live Forever',
  },
  {
    value: 'value4',
    label: 'Up in the Sky',
  },
]

Custom Icon

You can add icons to each Content Switcher using the icon slot.

Rock'n'Roll Star

Shakermaker

Live Forever

Up in the Sky

Vue

<HLRadioGroup id="radio-icon-group" v-model:value="value" name="radioGroupIcon">
  <HLContentSwitcher
    v-for="song in songs"
    :id="'radio-icon-' + song.value"
    :key="song.value"
    :value="song.value"
    :label="song.label"
  >
    <template #icon>
      <ListIcon />
    </template>
  </HLContentSwitcher>
</HLRadioGroup>

TS

const songs = [
  {
    value: 'value1',
    label: "Rock'n'Roll Star",
  },
  {
    value: 'value2',
    label: 'Shakermaker',
  },
  {
    value: 'value3',
    label: 'Live Forever',
  },
]

Width Variants

The Content Switcher supports three width variants through the width prop on the HLRadioGroup component:

• default: Each Content Switcher takes up only the space it needs
• equal: All Content Switchers in the group have equal width and will occupy 100% of the container's width, wrapping to the next line if the container is too small
• full: Content Switchers evenly distribute the container's width between them, with text truncating if needed

Default Width

Short

Medium length

This is a long option

Equal Width

Short

Medium length

This is a very long option

Full Width

Short

Medium length

This is a very long option

Vue

<template>
  <!-- Default Width -->
  <HLRadioGroup id="radio-width-default" v-model:value="value" name="radioGroupDefault">
    <HLContentSwitcher id="width-default-1" value="short" label="Short" />
    <HLContentSwitcher id="width-default-2" value="medium" label="Medium length" />
    <HLContentSwitcher id="width-default-3" value="long" label="This is a verylong option" />
  </HLRadioGroup>

  <!-- Equal Width -->
  <HLRadioGroup id="radio-width-equal" v-model:value="value" name="radioGroupEqual" width="equal">
    <HLContentSwitcher id="width-equal-1" value="short" label="Short" />
    <HLContentSwitcher id="width-equal-2" value="medium" label="Medium length" />
    <HLContentSwitcher id="width-equal-3" value="long" label="This is a very long option" />
  </HLRadioGroup>

  <!-- Full Width -->
  <HLRadioGroup id="radio-width-full" v-model:value="value" name="radioGroupFull" width="full">
    <HLContentSwitcher id="width-full-1" value="short" label="Short" />
    <HLContentSwitcher id="width-full-2" value="medium" label="Medium length" />
    <HLContentSwitcher id="width-full-3" value="long" label="This is a very long option" />
  </HLRadioGroup>
</template>

<script setup lang="ts">
import { HLRadioGroup, HLContentSwitcher } from '@platform-ui/highrise'
import { ref } from 'vue'

const value = ref('short')
</script>

Imports

import { HLContentSwitcher, HLRadioGroup } from '@platform-ui/highrise'

Props

Prop	Type	Default	Description
id *	string	undefined	Unique identifier for the radio button
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	Size of the radio button
disabled	boolean	false	Whether the radio button is disabled
value	string | number | boolean	undefined	Value associated with the radio button
name	string	undefined	Name attribute for the radio button
label	string	undefined	Label text for the radio button
onlyIcon	boolean	undefined	Shows the only icon associated with the radio

HLRadioGroup Props

Prop	Type	Default	Description
id *	string	undefined	Unique identifier for the radio group
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	Size of all radio buttons in the group
name	string	undefined	Name attribute for all radio buttons
width	'default' | 'equal' | 'full'	'default'	Width distribution of radio buttons

Slots

Name	Description
icon	Slot for the icon
default	Slot for the default content

Emits

Name	Parameters	Description
@change	(event: Event)	Emitted when selection changes
@update:value	(value: string | number | boolean)	Emitted when value changes