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">
    So you like
    <span class="color-box" :style="`background-color:${color};`"
      >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
    >
    ? 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>

<style scoped>
.color-box {
  border: 1px solid black;
  border-radius: 5px;
}
</style>

Properties

Emits

Slots