Accessibility: Full

Translations: Not Needed

Toggle

Atomic toggle element

Unchecked

Toggle Label

Vue

html

<script setup>
  import { ref } from 'vue'
  import { HLToggle, HLSpace } from '@platform-ui/highrise'

  const value1 = ref(false)
  const value2 = ref(false)
  const value3 = ref(false)
  const value4 = ref(false)
</script>

<template>
  <HLSpace align="center" justify="flex-start">
    <HLToggle id="toggle-unchecked-3xs" v-model:value="value1" size="3xs" label="Toggle Label" />
    <HLToggle id="toggle-unchecked-2xs" v-model:value="value2" size="2xs" label="Toggle Label" />
    <HLToggle id="toggle-unchecked-xs" v-model:value="value3" size="xs" label="Toggle Label" />
  </HLSpace>
</template>

Checked

Toggle Label

Vue

html

<template>
  <HLSpace align="center" justify="flex-start">
    <HLToggle id="toggle-checked-3xs" v-model:value="value1" size="3xs" label="Toggle Label" />
    <HLToggle id="toggle-checked-2xs" v-model:value="value2" size="2xs" label="Toggle Label" />
    <HLToggle id="toggle-checked-xs" v-model:value="value3" size="xs" label="Toggle Label" />
  </HLSpace>
</template>
<script setup>
  import { ref } from 'vue'
  import { HLToggle, HLSpace } from '@platform-ui/highrise'

  const value1 = ref(true)
  const value2 = ref(true)
  const value3 = ref(true)
</script>

Disabled - Unchecked

Toggle Label

Vue

html

<template>
  <HLSpace align="center" justify="flex-start">
    <HLToggle id="toggle-disabled-unchecked-3xs" :value="false" disabled size="3xs" label="Toggle Label" />
    <HLToggle id="toggle-disabled-unchecked-2xs" :value="false" disabled size="2xs" label="Toggle Label" />
    <HLToggle id="toggle-disabled-unchecked-xs" :value="false" disabled size="xs" label="Toggle Label" />
  </HLSpace>
</template>
<script setup>
  import { ref } from 'vue'
  import { HLToggle, HLSpace } from '@platform-ui/highrise'

  const value1 = ref(true)
  const value2 = ref(true)
  const value3 = ref(true)
</script>

Disabled - Checked

Toggle Label

Vue

html

<template>
  <HLSpace align="center" justify="flex-start">
    <HLToggle id="toggle-disabled-checked-3xs" :value="true" disabled size="3xs" label="Toggle Label" />
    <HLToggle id="toggle-disabled-checked-2xs" :value="true" disabled size="2xs" label="Toggle Label" />
    <HLToggle id="toggle-disabled-checked-xs" :value="true" disabled size="xs" label="Toggle Label" />
  </HLSpace>
</template>
<script setup>
  import { ref } from 'vue'
  import { HLToggle, HLSpace } from '@platform-ui/highrise'

  const value1 = ref(true)
  const value2 = ref(true)
  const value3 = ref(true)
</script>

Error - Checked

Toggle Label

Vue

html

<template>
  <HLSpace align="center" justify="flex-start">
    <HLToggle id="toggle-error-checked-3xs" v-model:value="value1" variant="error" size="3xs" label="Toggle Label" />
    <HLToggle id="toggle-error-checked-2xs" v-model:value="value2" variant="error" size="2xs" label="Toggle Label" />
    <HLToggle id="toggle-error-checked-xs" v-model:value="value3" variant="error" size="xs" label="Toggle Label" />
  </HLSpace>
</template>
<script setup>
  import { ref } from 'vue'
  import { HLToggle, HLSpace } from '@platform-ui/highrise'

  const value1 = ref(true)
  const value2 = ref(true)
  const value3 = ref(true)
</script>

Error - Unchecked

Toggle Label

Vue

html

<template>
  <HLSpace align="center" justify="flex-start">
    <HLToggle id="toggle-error-unchecked-3xs" v-model:value="value1" variant="error" size="3xs" label="Toggle Label" />
    <HLToggle id="toggle-error-unchecked-2xs" v-model:value="value2" variant="error" size="2xs" label="Toggle Label" />
    <HLToggle id="toggle-error-unchecked-xs" v-model:value="value3" variant="error" size="xs" label="Toggle Label" />
  </HLSpace>
</template>
<script setup>
  import { ref } from 'vue'
  import { HLToggle, HLSpace } from '@platform-ui/highrise'
</script>

Accessibility

Connect the toggle to visible text through aria-labelledby (fallback to aria-label for icon-only controls).
Keep aria-checked synchronized with the bound value and flip aria-invalid when validation fails.
When the toggle controls another region, include aria-controls referencing that region’s id.

Imports

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

Props

Name	Type	Default	Description
id	`string`	Auto (`hr-toggle-*`)	The unique identifier for the toggle. Generated when omitted.
checkedValue	`string \| number \| boolean`	`true`	The value when toggle is checked
defaultValue	`boolean`	`undefined`	The initial value of the toggle
disabled	`boolean`	`false`	Whether the toggle is disabled
loading	`boolean`	`false`	Whether the toggle is in loading state
size	`'lg' \| 'md' \| 'sm' \| 'xs' \| '2xs' \| '3xs'`	`'xs'`	The size of the toggle
uncheckedValue	`string \| number \| boolean`	`false`	The value when toggle is unchecked
value	`string \| number \| boolean`	`undefined`	The current value of the toggle
label	`string`	`undefined`	The label text for the toggle
variant	`'default' \| 'error'`	`'default'`	To set form item state of toggle

Emits

Name	Parameters	Description
`@update:value`	`(value: string \| number \| boolean) => void`	Emitted when toggle value changes
`@label:click`	`(event: Event)=> void`	Emitted when toggle label is clicked

Toggle ​

Unchecked ​

Checked ​

Disabled - Unchecked ​

Disabled - Checked ​

Error - Checked ​

Error - Unchecked ​

Accessibility ​

Imports ​

Props ​

Emits ​

Toggle

Unchecked

Checked

Disabled - Unchecked

Disabled - Checked

Error - Checked

Error - Unchecked

Accessibility

Imports

Props

Emits