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

html

<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

Vue

html

<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

VueTS

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>

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

VueTS

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>

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

Custom Font Style

You can use the HLText component to style the label of the Content Switcher.

Rock'n'Roll Star

Shakermaker

Live Forever

Up in the Sky

Vue

html

<HLRadioGroup id="radio-custom-font-style-group" v-model:value="customFontStyle" name="radioGroupCustomFontStyle" size="sm">
  <HLContentSwitcher v-for="song in songs" :id="'radio-basic-' + song.value" :key="song.value" :value="song.value">
    <HLText size="2xl" weight="regular">{{ song.label }}</HLText>
  </HLContentSwitcher>
</HLRadioGroup>

Theme variants

The Content Switcher supports two theme variants through the theme prop on the HLRadioGroup component:

Neutral theme

Rock'n'Roll Star

Shakermaker

Live Forever

Up in the Sky

Primary theme

Rock'n'Roll Star

Shakermaker

Live Forever

Up in the Sky

primaryneutral

html

<HLRadioGroup id="radio-theme-group" v-model:value="value" name="radioGroupTheme" theme="primary">
  <HLContentSwitcher id="theme-neutral-1" value="short" label="Short" />
  <HLContentSwitcher id="theme-neutral-2" value="medium" label="Medium length" />
  <HLContentSwitcher id="theme-neutral-3" value="long" label="This is a very long option" />
</HLRadioGroup>

html

<HLRadioGroup id="radio-theme-group" v-model:value="value" name="radioGroupTheme" theme="neutral">
  <HLContentSwitcher id="theme-neutral-1" value="short" label="Short" />
  <HLContentSwitcher id="theme-neutral-2" value="medium" label="Medium length" />
  <HLContentSwitcher id="theme-neutral-3" value="long" label="This is a very long option" />
</HLRadioGroup>

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

Vue

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

Content Switcher ​

Basic Usage ​

All Sizes ​

Disabled State ​

Custom Icon ​

Custom Font Style ​

Theme variants ​

Neutral theme ​

Primary theme ​

Width Variants ​

Default Width

Equal Width

Full Width

Imports ​

Props ​

HLRadioGroup Props ​

Slots ​

Emits ​

Content Switcher

Basic Usage

All Sizes

Disabled State

Custom Icon

Custom Font Style

Theme variants

Neutral theme

Primary theme

Width Variants

Imports

Props

HLRadioGroup Props

Slots

Emits