Color Field

Captures a color using native functionality.
alphaView source
vue
<script setup lang="ts">
import { ColorField } from '@typlog/ui'
</script>

<template>
  <div class="flex">
    <ColorField default-value="#3e63dd" radius="full" />
  </div>
</template>

API Reference ​

PropDefaultType
defaultValue
–
string
id
–
string
modelValue
–
string
radius
–
"none""small""medium""large""full"
size
–
"1""2""3"
variant
–
"solid""ring"

Examples ​

Size ​

vue
<script setup lang="ts">
import { ColorField } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <ColorField default-value="#3e63dd" size="1" />
    <ColorField default-value="#3e63dd" size="2" />
    <ColorField default-value="#3e63dd" size="3" />
  </div>
</template>

Radius ​

vue
<script setup lang="ts">
import { ColorField } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <ColorField default-value="#3e63dd" radius="none" />
    <ColorField default-value="#3e63dd" radius="small" />
    <ColorField default-value="#3e63dd" radius="medium" />
    <ColorField default-value="#3e63dd" radius="large" />
    <ColorField default-value="#3e63dd" radius="full" />
  </div>
</template>

Variant ​

vue
<script setup lang="ts">
import { ColorField } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <ColorField default-value="#3e63dd" variant="solid" radius="full" />
    <ColorField default-value="#3e63dd" variant="ring" radius="full" />
  </div>
</template>