Returnless UI

Color field ​

Props
modelValue?:
string
Defaults to unknown
disabled?:
boolean
Defaults to false
Whether the input is disabled.
error?:
string | null
Defaults to null
The error to display below the input.
helpText?:
string | null
Defaults to null
The help text to display below the input.
id?:
string | null
Defaults to null
The ID of the input the label is associated with.
label:
string
Defaults to unknown
The label text.
labelHidden?:
boolean
Defaults to false
Whether the label is hidden.
name:
string
Defaults to unknown
The name of the input.
Events
update:modelValue:
[value: string]

Usage ​

#000000
js
<script lang="ts" setup>
import { ref } from 'vue'; 
import { ColorInput } from '@returnless/focus-ui';

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

<template>
  <ColorInput v-model="color" label="Color" />
</template>

Disabled color input ​

Use the disabled prop to disable the color input.

#000000
js
<script lang="ts" setup>
import { ref } from 'vue'; 
import { ColorInput } from '@returnless/focus-ui';

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

<template>
  <ColorInput v-model="color" label="Color" disabled />
</template>