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
| Prop | Default | Type |
|---|---|---|
| defaultValue | – | string |
| id | – | string |
| modelValue | – | string |
| radius | – | "none""small""medium""large""full" |
| size | "2" | "1""2""3" |
| variant | "solid" | "ring""solid" |
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> Last updated Sep 15, 2026