Reka UI logoReka
backdrop
Examples
Components

Color Field

Alpha
An input field component for entering color values. Supports hex color input or individual color channel values with keyboard navigation and wheel interaction.

Features

  • Supports hex color input mode.
  • Individual color channel editing mode.
  • Keyboard navigation with arrow keys.
  • Mouse wheel support for increment/decrement.
  • Page Up/Down for larger value changes.
  • Home/End keys to jump to min/max values.
  • Form integration with hidden inputs.
  • Support for HSL, HSB, and RGB color spaces.

Installation

Install the component from your command line.

sh
$ npm add reka-ui
tip

Looking for a complete color picker? Check out the Color Picker example that combines Color Area, Color Slider, Color Field, and Color Swatch components.

Anatomy

Import all parts and piece them together.

vue
<script setup>
import {
  ColorFieldInput,
  ColorFieldRoot,
} from 'reka-ui'
</script>

<template>
  <ColorFieldRoot>
    <ColorFieldInput />
  </ColorFieldRoot>
</template>

API Reference

ColorFieldRoot

The root component that provides the color field context and state management.

PropDefaultType
as
'div'
AsTag | Component

The element or component this component should render as. Can be overwritten by asChild.

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

channel
'hue' | 'saturation' | 'red' | 'green' | 'blue' | 'alpha' | 'lightness' | 'brightness'

The color channel to display. If not provided, displays hex value.

colorSpace
'hsl'
'hsl' | 'rgb' | 'hsb'

The color space to operate in when displaying a channel.

defaultValue
'#000000'
string | Color

The default color value (uncontrolled).

disabled
false
boolean

When true, prevents the user from interacting with the field.

disableWheelChange
false
boolean

When true, prevents the value from changing on wheel scroll.

locale
string

The locale to use for number formatting.

modelValue
string | Color

The color value (controlled). Can be a hex string or Color object.

name
string

The name of the field. Submitted with its owning form as part of a name/value pair.

placeholder
string

Placeholder text when the field is empty.

readonly
false
boolean

When true, the field is read-only.

required
boolean

When true, indicates that the user must set the value before the owning form can be submitted.

step
number

Custom step value for increment/decrement. Defaults to channel step or 1 for hex.

EmitPayload
update:color
[value: Color]
update:modelValue
[value: string]

Event handler called when the value of the checkbox changes.

ColorFieldInput

The input element for entering color values.

PropDefaultType
as
'input'
AsTag | Component

The element or component this component should render as. Can be overwritten by asChild.

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

Examples

Hex Color Input

Basic hex color input field.

vue
<script setup>
import {
  ColorFieldInput,
  ColorFieldRoot,
} from 'reka-ui'
import { ref } from 'vue'

const color = ref('#3b82f6')
</script>

<template>
  <ColorFieldRoot v-model="color">
    <ColorFieldInput />
  </ColorFieldRoot>
</template>

Channel Input

Input for a specific color channel (e.g., hue).

vue
<script setup>
import {
  ColorFieldInput,
  ColorFieldRoot,
} from 'reka-ui'
import { ref } from 'vue'

const color = ref('#3b82f6')
</script>

<template>
  <ColorFieldRoot
    v-model="color"
    color-space="hsl"
    channel="hue"
  >
    <ColorFieldInput />
  </ColorFieldRoot>
</template>

With Wheel Control Disabled

Prevent changing values with mouse wheel.

vue
<script setup>
import {
  ColorFieldInput,
  ColorFieldRoot,
} from 'reka-ui'
import { ref } from 'vue'

const color = ref('#3b82f6')
</script>

<template>
  <ColorFieldRoot
    v-model="color"
    disable-wheel-change
  >
    <ColorFieldInput />
  </ColorFieldRoot>
</template>

Read-only Mode

Display the color value without allowing edits.

vue
<script setup>
import {
  ColorFieldInput,
  ColorFieldRoot,
} from 'reka-ui'
import { ref } from 'vue'

const color = ref('#3b82f6')
</script>

<template>
  <ColorFieldRoot
    v-model="color"
    readonly
  >
    <ColorFieldInput />
  </ColorFieldRoot>
</template>

Accessibility

Keyboard Interactions

KeyDescription
ArrowUpIncreases the value by one step.
ArrowDownDecreases the value by one step.
PageUpIncreases the value by 10 steps.
PageDownDecreases the value by 10 steps.
HomeSets the value to minimum.
EndSets the value to maximum.
EnterCommits the current input value.