RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Not Needed

Try in Cursor

Swatch Tile

A color swatch component that displays interactive color samples.

Default

Renders a single swatch tile from a color value.

<template>
  <HLSwatchTile value="#D9D6FE" />
</template>

<script setup lang="ts">
import { HLSwatchTile } from '@platform-ui/highrise'
</script>

Square Shape (Default)

The square shape is the default; shown here across all sizes.

<template>
  <HLSwatchTile value="#D9D6FE77" size="3xs" shape="square" />
  <HLSwatchTile value="#D9D6FE77" size="2xs" shape="square" />
  <HLSwatchTile value="#D9D6FE77" size="xs" shape="square" />
  <HLSwatchTile value="#D9D6FE77" size="sm" shape="square" />
  <HLSwatchTile value="#D9D6FE77" size="md" shape="square" />
  <HLSwatchTile value="#D9D6FE77" size="lg" shape="square" />
</template>

<script setup lang="ts">
import { HLSwatchTile } from '@platform-ui/highrise'
</script>

Round Shape

Set shape="circle" to render circular swatches.

<template>
  <HLSwatchTile value="#D9D6FE77" size="3xs" shape="circle" />
  <HLSwatchTile value="#D9D6FE77" size="2xs" shape="circle" />
  <HLSwatchTile value="#D9D6FE77" size="xs" shape="circle" />
  <HLSwatchTile value="#D9D6FE77" size="sm" shape="circle" />
  <HLSwatchTile value="#D9D6FE77" size="md" shape="circle" />
  <HLSwatchTile value="#D9D6FE77" size="lg" shape="circle" />
</template>

<script setup lang="ts">
import { HLSwatchTile } from '@platform-ui/highrise'
</script>

Rectangle Shape

Set shape="rectangle" to render rectangular swatches.

<template>
  <HLSwatchTile value="#D9D6FE77" size="3xs" shape="rectangle" />
  <HLSwatchTile value="#D9D6FE77" size="2xs" shape="rectangle" />
  <HLSwatchTile value="#D9D6FE77" size="xs" shape="rectangle" />
  <HLSwatchTile value="#D9D6FE77" size="sm" shape="rectangle" />
  <HLSwatchTile value="#D9D6FE77" size="md" shape="rectangle" />
  <HLSwatchTile value="#D9D6FE77" size="lg" shape="rectangle" />
</template>

<script setup lang="ts">
import { HLSwatchTile } from '@platform-ui/highrise'
</script>

Different Colors and Sizes

Combine the value, size, and shape props to mix colors, sizes, and shapes.

<template>
  <HLSwatchTile value="#FF5733" size="3xs" />
  <HLSwatchTile value="#33FF57" size="2xs" />
  <HLSwatchTile value="#3357FF" size="xs" shape="circle" />
  <HLSwatchTile value="#FF5733" size="sm" shape="circle" />
  <HLSwatchTile value="#33FF57" size="md" shape="rectangle" />
  <HLSwatchTile value="#3357FF" size="lg" shape="rectangle" />
</template>

<script setup lang="ts">
import { HLSwatchTile } from '@platform-ui/highrise'
</script>

Interactive States

Adding tabindex="0" makes a tile keyboard-focusable and interactive.

<template>
  <HLSwatchTile value="#D9D6FE77" size="md" />
  <HLSwatchTile value="#D9D6FE77" size="md" tabindex="0" />
</template>

<script setup lang="ts">
import { HLSwatchTile } from '@platform-ui/highrise'
</script>

Event Testing

The swatch tile emits @select with its color value when clicked, or when focused and activated with Enter / Space. This example logs each selection and uses the selected prop to highlight the active tile.

Event Log:

No events logged yet. Click or focus + Enter a swatch above.

<template>
  <HLSwatchTile
    v-for="color in swatchColors"
    :key="color"
    :value="color"
    size="md"
    tabindex="0"
    :selected="selectedColor === color"
    @select="handleSelect"
  />
  <div class="text-sm">
    <p class="font-bold mb-2">Event Log:</p>
    <div v-if="eventLog.length === 0" class="text-gray-500">No events logged yet. Click or focus + Enter a swatch above.</div>
    <div v-for="(log, index) in eventLog" :key="index" class="text-gray-700">{{ log.timestamp }}: {{ log.event }}</div>
  </div>
</template>

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

const swatchColors = ['#FF5733', '#33FF57', '#3357FF', '#D9D6FE']
const selectedColor = ref('')
const eventLog = ref<{ event: string; timestamp: string }[]>([])
const addEventLog = (event: string) => {
  eventLog.value.unshift({ event, timestamp: new Date().toLocaleTimeString() })
  if (eventLog.value.length > 5) {
    eventLog.value.pop()
  }
}
const handleSelect = (color: string) => {
  selectedColor.value = color
  addEventLog('@select → ' + color)
}
</script>

Accessibility

• Give each tile an aria-label that names the color/pattern rather than relying on hue alone.
• Keep aria-pressed / aria-selected aligned with the tile’s selected state.
• Group related swatches inside a role="listbox" / radiogroup container and describe it with aria-labelledby.

Imports

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

Props

Name	Type	Default	Description
value	string | undefined	'transparent'	Color value (hex, rgb, or name). 'transparent' shows the empty/no-color tile
size	'3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg'	'md'	Size of the swatch tile
shape	'square' | 'circle' | 'rectangle'	'square'	Shape of the swatch tile
selected	boolean	false	When true, draws a highlight ring around the tile to mark it as selected
transparent	boolean	false	When true, overlays a red diagonal slash to indicate a "no color" / transparent choice

Emits

Name	Parameters	Description
@select	(value: string) => void	Emitted with the tile's color value when clicked, or activated via Enter / Space when focused