Color Field

SColorField is a text input for a hex color with a preview swatch on the left. The value is normalized (case, #) and can be changed with the arrow keys and the mouse wheel. It is built on SFormField (label, hint, error message); the value is a hex string bound with v-model. For visual color picking, use SColorPicker.

Basic usage

<script setup>
import { ref } from 'vue'
const color = ref('#3B82F6')
</script>

<template>
  <SColorField
    v-model="color"
    label="Brand color"
  />
</template>

Hint and error message

<template>
  <SColorField
    v-model="color"
    label="Accent"
    hint="Primary brand color"
  />
  <SColorField
    v-model="color"
    label="Color"
    error="Enter a valid hex value"
  />
</template>

Sizes

The size prop controls the field height: sm (28px), md (36px), or lg (44px).

<template>
  <SColorField
    v-model="color"
    label="sm"
    size="sm"
  />
  <SColorField
    v-model="color"
    label="md"
    size="md"
  />
  <SColorField
    v-model="color"
    label="lg"
    size="lg"
  />
</template>

States

required adds * to the label, readonly prevents editing, disabled dims the field, invalid marks it as invalid, and hint shows a hint under the field.

<template>
  <SColorField
    v-model="color"
    label="Required"
    required
    hint="Brand color"
  />
  <SColorField
    v-model="color"
    label="Read-only"
    readonly
  />
  <SColorField
    v-model="color"
    label="Disabled"
    disabled
  />
  <SColorField
    v-model="color"
    label="Invalid"
    invalid
  />
</template>

prepend / append slots

The slots insert arbitrary content inside the field frame next to the swatch: an icon, text, or a button.

<template>
  <SColorField
    v-model="color"
    aria-label="Primary color"
  >
    <template #prepend>
      <SIcon
        icon="star"
        :size="16"
      />
    </template>
  </SColorField>

  <SColorField
    v-model="color"
    aria-label="Color"
  >
    <template #append>
      <SButton
        size="sm"
        variant="ghost"
        icon="copy"
        aria-label="Copy"
      />
    </template>
  </SColorField>
</template>

API

Props

Name	Type	Default	Description
id	string	undefined	Field id. Generated automatically when omitted (SSR-safe).
label	string	undefined	Field label.
floating-label	boolean	true	Floating label: the label sits inside the border, looks like a placeholder at rest and moves up to the top border on focus/when filled. On by default; false gives a regular label above. The label size is fixed and does not depend on size.
hint	string	undefined	Hint below the field.
error	string	undefined	Error message. When set, the field is marked invalid.
placeholder	string	undefined	Placeholder in an empty field.
size	"md" | "sm" | "lg"	"md"	Field size: sm (32px), md (40px) or lg (48px).
disabled	boolean	false	Disables the field.
readonly	boolean	false	Read-only.
required	boolean	false	Marks the field as required: shows * next to the label.
invalid	boolean	false	Explicitly marks the field invalid (in addition to error).
square	boolean	undefined	Square corners: removes the field border radius (rounded by default).
model-value	string	undefined	Color value in hex (e.g. #3B82F6). Two-way binding via v-model.

Events

Name	Signature	Description
update:modelValue	(value: string | undefined) => void	Emitted when modelValue changes. Used for two-way binding (v-model).

Slots

Name	Description
prepend	Content at the start of the field, inside the border (icon, button).
append	Content at the end of the field, inside the border (icon, button).