Hex Input

An input field for entering hexadecimal color values.

Hex

Code

Usage

Vue

import { HexInput } from '@hueycolor/vue'

<script setup>
import { ref } from 'vue'
import { HueyRoot, HexInput, hueyColor } from '@hueycolor/vue'

const color = ref(hueyColor('#1A3263'))
</script>

<template>
  <HueyRoot v-model="color">
    <HexInput />
  </HueyRoot>
</template>

Svelte

import { HexInput } from '@hueycolor/svelte'

<script>
import { HueyRoot, HexInput, hueyColor } from '@hueycolor/svelte'

let color = $state(hueyColor('#1A3263'))
</script>

<HueyRoot bind:color>
  <HexInput />
</HueyRoot>

Props

Prop	Type	Default	Description
alpha	boolean	false	Whether to include the alpha channel in the hex value. Set to true to display an 8-digit hex with the alpha channel.

Extends all standard HTML input attributes (id, placeholder, disabled, etc.).

Format

Accepts both 3-digit and 6-digit hex values, with or without the # prefix. Use the up/down arrow keys to bump hex pair values. Hold Shift to bump by 10.

Styling

Target with [huey-input="hex"]. The component renders a bare <input> and exposes no CSS variables of its own.

With a label

HexInput is a single <input> element, so wrap it in a <label> (or pair it with one via id) to add a visible label and keep it accessible.

Vue

<label>
  <span>Hex</span>
  <HexInput />
</label>

Svelte

<label>
  <span>Hex</span>
  <HexInput />
</label>