Color Field

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

View code

Color

Value: #3b82f6

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.

$ npm add reka-ui

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.

Prop	Default	Type
`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`		`'red' \| 'green' \| 'blue' \| 'alpha' \| 'hue' \| 'saturation' \| 'lightness' \| 'brightness'` The color channel to display. If not provided, displays hex value.
`colorSpace`	`'hsl'`	`'rgb' \| 'hsl' \| '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.
`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 field must be filled before the form can be submitted.
`step`		`number` Custom step value for increment/decrement. Defaults to channel step or 1 for hex.

Emit	Payload
`update:color`	`[value: Color]`
`update:modelValue`	`[value: string]`

ColorFieldInput

The input element for entering color values.

Prop	Default	Type
`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

Key	Description
`ArrowUp`	Increases the value by one step.
`ArrowDown`	Decreases the value by one step.
`PageUp`	Increases the value by 10 steps.
`PageDown`	Decreases the value by 10 steps.
`Home`	Sets the value to minimum.
`End`	Sets the value to maximum.
`Enter`	Commits the current input value.

Color Field ​

Features ​

Installation ​

Anatomy ​

API Reference ​

ColorFieldRoot ​

ColorFieldInput ​

Examples ​

Hex Color Input ​

Channel Input ​

With Wheel Control Disabled ​

Read-only Mode ​

Accessibility ​

Keyboard Interactions ​