OcColorInput component

Description

OcColorInputs allow users to pick or type a color.

Accessibility

The label is required and represents the name of the input.

The description-message can be used additionally to give further information about the input field. When a description is given, it will be referenced via the aria-describedby property automatically. An error or warning will replace the description as well as the aria-describedby property until the error or warning is fixed.

Examples

Default

The default and most simple use case involves a v-model and a label.

<template>
  <oc-color-input v-model="color" label="Your favorite color" />
  <p v-if="color" class="flex items-center">
    So you like
    <span
      class="inline-block w-4 h-4 rounded-full mx-1 border-2 border-role-outline-variant"
      :style="`background-color:${color};`"
    />
    ? Nice!
  </p>
  <p v-else>I see, you don't like colors at all.</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const color = ref<string>('#ff0000')
</script>

Properties

Emits

Slots