ColorField 颜色输入框

基于 React Aria ColorField 的颜色输入字段，支持标签、描述与验证

用法

1import { ColorField, parseColor } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2
3import { ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6
7const styles = stylex.create({ field: { width: 280, maxWidth: "100%" } });8export function Basic() {9  const [color, setColor] = useState<ReturnType<typeof parseColor> | null>(() =>10    parseColor("#0485F7"),11  );12  return (13    <ColorField xstyle={styles.field} name="color" value={color} onChange={setColor}>14      <ColorField.Label>Color</ColorField.Label>15      <ColorField.Group>16        <ColorField.Prefix>17          <ColorSwatch {...(color ? { color } : {})} size="xs" />18        </ColorField.Prefix>19        <ColorField.Input />20      </ColorField.Group>21    </ColorField>22  );23}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

组件结构

1import {ColorField, Label, ColorSwatch, Description, FieldError, parseColor} from '@lenso/ui';2
3export default () => (4  <ColorField>5    <Label />6    <ColorField.Group>7      <ColorField.Prefix>8        <ColorSwatch color="#000000" />9      </ColorField.Prefix>10      <ColorField.Input />11    </ColorField.Group>12    <Description />13    <FieldError />14  </ColorField>15)

ColorField 将标签、颜色输入、描述与错误合并为单个无障碍组件。

示例

变体

ColorField.Group 组件支持两种视觉变体：

primary（默认）- 标准样式带阴影，适用于大多数场景
secondary - 低强调变体无阴影，适用于 Surface 组件内

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function Variants() {7  return (8    <div {...stylex.props(styles.column)}>9      <ColorField xstyle={styles.width280} defaultValue="#0485F7" name="primary-color">10        <ColorField.Label>Primary variant</ColorField.Label>11        <ColorField.Group variant="primary">12          <ColorField.Input />13        </ColorField.Group>14      </ColorField>15      <ColorField xstyle={styles.width280} defaultValue="#F43F5E" name="secondary-color">16        <ColorField.Label>Secondary variant</ColorField.Label>17        <ColorField.Group variant="secondary">18          <ColorField.Input />19        </ColorField.Group>20      </ColorField>21    </div>22  );23}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

表面样式

在 Surface 组件内使用时，在 ColorField.Group 上使用 variant="secondary" 以应用适合 Surface 背景的低强调变体。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField, Surface } from "@lenso/ui";4import { styles } from "../color-picker/source.stylex";5export function OnSurface() {6  return (7    <Surface xstyle={[styles.width320, styles.padded]}>8      <ColorField defaultValue="#3B82F6" name="color">9        <ColorField.Label>Theme Color</ColorField.Label>10        <ColorField.Group variant="secondary">11          <ColorField.Input />12        </ColorField.Group>13        <ColorField.Description>Select your theme color</ColorField.Description>14      </ColorField>15    </Surface>16  );17}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

带描述

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function WithDescription() {7  return (8    <div {...stylex.props(styles.column)}>9      <ColorField xstyle={styles.width280} defaultValue="#3B82F6" name="color">10        <ColorField.Label>Primary Color</ColorField.Label>11        <ColorField.Group>12          <ColorField.Input />13        </ColorField.Group>14        <ColorField.Description>Enter your brand's primary color</ColorField.Description>15      </ColorField>16      <ColorField xstyle={styles.width280} defaultValue="#F59E0B" name="accent-color">17        <ColorField.Label>Accent Color</ColorField.Label>18        <ColorField.Group>19          <ColorField.Input />20        </ColorField.Group>21        <ColorField.Description>Used for highlights and CTAs</ColorField.Description>22      </ColorField>23    </div>24  );25}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

必填字段

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function Required() {7  return (8    <div {...stylex.props(styles.column)}>9      <ColorField isRequired xstyle={styles.width280} name="color">10        <ColorField.Label>Brand Color</ColorField.Label>11        <ColorField.Group>12          <ColorField.Input placeholder="#000000" />13        </ColorField.Group>14      </ColorField>15      <ColorField isRequired xstyle={styles.width280} name="theme-color">16        <ColorField.Label>Theme Color</ColorField.Label>17        <ColorField.Group>18          <ColorField.Input placeholder="#000000" />19        </ColorField.Group>20        <ColorField.Description>Required field</ColorField.Description>21      </ColorField>22    </div>23  );24}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

禁用

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function Disabled() {7  return (8    <div {...stylex.props(styles.column)}>9      <ColorField isDisabled xstyle={styles.width280} defaultValue="#0485F7" name="color">10        <ColorField.Label>Color</ColorField.Label>11        <ColorField.Group>12          <ColorField.Input />13        </ColorField.Group>14        <ColorField.Description>This color field is disabled</ColorField.Description>15      </ColorField>16      <ColorField isDisabled xstyle={styles.width280} name="color-empty">17        <ColorField.Label>Color</ColorField.Label>18        <ColorField.Group>19          <ColorField.Input placeholder="#000000" />20        </ColorField.Group>21        <ColorField.Description>This color field is disabled</ColorField.Description>22      </ColorField>23    </div>24  );25}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

宽度充满

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { styles } from "../color-picker/source.stylex";6export function FullWidth() {7  return (8    <div {...stylex.props(styles.width400, styles.column)}>9      <ColorField fullWidth defaultValue="#10B981" name="color">10        <ColorField.Label>Brand Color</ColorField.Label>11        <ColorField.Group>12          <ColorField.Input />13        </ColorField.Group>14      </ColorField>15      <ColorField fullWidth defaultValue="#8B5CF6" name="color-with-suffix">16        <ColorField.Label>Theme Color</ColorField.Label>17        <ColorField.Group>18          <ColorField.Input />19        </ColorField.Group>20      </ColorField>21    </div>22  );23}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

表单校验

将 isInvalid 与 FieldError 一起使用以显示验证消息。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { styles } from "../color-picker/source.stylex";7export function Invalid() {8  // A Color cannot represent malformed text; keep the source's invalid edit in the input.9  const [invalidText, setInvalidText] = useState("not-a-color");10  return (11    <div {...stylex.props(styles.column)}>12      <ColorField isInvalid isRequired xstyle={styles.width280} name="color">13        <ColorField.Label>Color</ColorField.Label>14        <ColorField.Group>15          <ColorField.Input placeholder="#000000" />16        </ColorField.Group>17        <ColorField.Error>Please enter a valid hex color</ColorField.Error>18      </ColorField>19      <ColorField isInvalid xstyle={styles.width280} name="invalid-color">20        <ColorField.Label>Background Color</ColorField.Label>21        <ColorField.Group>22          <ColorField.Input23            value={invalidText}24            onChange={(event) => setInvalidText(event.target.value)}25          />26        </ColorField.Group>27        <ColorField.Error>Invalid color format. Use hex (e.g., #FF5733)</ColorField.Error>28      </ColorField>29    </div>30  );31}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

分量编辑

ColorField 支持通过设置 colorSpace 与 channel 属性编辑单个颜色通道（hue、saturation、lightness、red、green、blue、alpha）。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { styles } from "../color-picker/source.stylex";8export function ChannelEditing() {9  const [color, setColor] = useState<Color | null>(parseColor("#7F007F"));10  return (11    <div {...stylex.props(styles.column)}>12      <p {...stylex.props(styles.muted)}>Edit individual HSL channels:</p>13      <div {...stylex.props(styles.controls)}>14        {(["hue", "saturation", "lightness"] as const).map((channel) => (15          <ColorField16            key={channel}17            channel={channel}18            xstyle={styles.width100}19            colorSpace="hsl"20            name={channel}21            value={color}22            onChange={setColor}23          >24            <ColorField.Label xstyle={styles.capitalize}>{channel}</ColorField.Label>25            <ColorField.Group>26              <ColorField.Input />27              {channel !== "hue" && (28                <ColorField.Suffix>29                  <span {...stylex.props(styles.muted)}>%</span>30                </ColorField.Suffix>31              )}32            </ColorField.Group>33          </ColorField>34        ))}35      </div>36      <div {...stylex.props(styles.row2)}>37        <ColorSwatch color={color ?? undefined} size="md" />38        <span {...stylex.props(styles.small)}>39          Current: {color ? color.toString("hex") : "(empty)"}40        </span>41      </div>42    </div>43  );44}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

受控组件

控制值以与其他组件或状态管理同步。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { Button, ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { styles } from "../color-picker/source.stylex";8export function Controlled() {9  const [value, setValue] = useState<Color | null>(parseColor("#0485F7"));10  return (11    <div {...stylex.props(styles.column)}>12      <ColorField xstyle={styles.width280} name="color" value={value} onChange={setValue}>13        <ColorField.Label>Color</ColorField.Label>14        <ColorField.Group>15          <ColorField.Prefix>16            <ColorSwatch color={value ?? undefined} size="xs" />17          </ColorField.Prefix>18          <ColorField.Input />19        </ColorField.Group>20        <ColorField.Description>21          Current value: {value ? value.toString("hex") : "(empty)"}22        </ColorField.Description>23      </ColorField>24      <div {...stylex.props(styles.row2)}>25        <Button variant="tertiary" onClick={() => setValue(parseColor("#EF4444"))}>26          Set Red27        </Button>28        <Button variant="tertiary" onClick={() => setValue(parseColor("#10B981"))}>29          Set Green30        </Button>31        <Button variant="tertiary" onClick={() => setValue(null)}>32          Clear33        </Button>34      </div>35    </div>36  );37}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

表单示例

包含验证与提交处理的完整表单示例。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. Native form and Base UI button retain the source submit workflow. */3import { Button, ColorField, ColorSwatch } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState, type FormEvent } from "react";6import * as stylex from "@stylexjs/stylex";7import { styles } from "../color-picker/source.stylex";8export function FormExample() {9  const [value, setValue] = useState<Color | null>(null);10  const [isSubmitting, setIsSubmitting] = useState(false);11  function handleSubmit(event: FormEvent<HTMLFormElement>) {12    event.preventDefault();13    if (!value || isSubmitting) return;14    setIsSubmitting(true);15    setTimeout(() => {16      setValue(null);17      setIsSubmitting(false);18    }, 1500);19  }20  return (21    <form {...stylex.props(styles.column, styles.width280)} onSubmit={handleSubmit}>22      <ColorField23        fullWidth24        isRequired25        xstyle={styles.full}26        name="brand-color"27        value={value}28        onChange={setValue}29      >30        <ColorField.Label>Brand Color</ColorField.Label>31        <ColorField.Group>32          <ColorField.Prefix>33            <ColorSwatch color={value ?? undefined} size="xs" />34          </ColorField.Prefix>35          <ColorField.Input placeholder="#000000" />36        </ColorField.Group>37        <ColorField.Description>Choose your brand's primary color</ColorField.Description>38      </ColorField>39      <Button40        xstyle={styles.full}41        disabled={!value}42        isLoading={isSubmitting}43        type="submit"44        variant="primary"45      >46        {isSubmitting ? "Saving..." : "Save Color"}47      </Button>48    </form>49  );50}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

渲染函数

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. Native RAC render state replaces DOM render interception. */3import { ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState } from "react";6import { styles } from "../color-picker/source.stylex";7export function RenderFunction() {8  const [color, setColor] = useState<Color | null>(parseColor("#0485F7"));9  return (10    <ColorField11      xstyle={styles.width280}12      name="color"13      data-custom="foo"14      value={color}15      onChange={setColor}16    >17      {({ isInvalid }) => (18        <>19          <ColorField.Label>Color</ColorField.Label>20          <ColorField.Group data-custom="foo" data-invalid={isInvalid || undefined}>21            <ColorField.Prefix>22              <ColorSwatch color={color ?? undefined} size="xs" />23            </ColorField.Prefix>24            <ColorField.Input />25          </ColorField.Group>26        </>27      )}28    </ColorField>29  );30}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2/** Adapted from HeroUI v3.2.6. Apache-2.0. */3import { ColorField, ColorSwatch, parseColor } from "@lenso/ui";4import type { Color } from "@lenso/ui";5import { useState } from "react";6import { styles } from "../color-picker/source.stylex";7export function CustomStyles() {8  const [color, setColor] = useState<Color | null>(parseColor("#6366F1"));9  return (10    <ColorField xstyle={styles.customField} name="accent-color" value={color} onChange={setColor}>11      <ColorField.Label xstyle={styles.label}>Accent color</ColorField.Label>12      <ColorField.Description>Applied to buttons, links, and focus rings.</ColorField.Description>13      <ColorField.Group xstyle={styles.customGroup} variant="secondary">14        <ColorField.Prefix>15          <ColorSwatch xstyle={styles.square} color={color ?? undefined} size="xs" />16        </ColorField.Prefix>17        <ColorField.Input xstyle={styles.customInput} />18      </ColorField.Group>19    </ColorField>20  );21}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

ColorField 默认样式较少。覆盖 .color-field 类以自定义容器样式。

1@layer components {2  .color-field {3    @apply flex flex-col gap-1;4
5    &[data-invalid="true"],6    &[aria-invalid="true"] {7      [data-slot="description"] {8        @apply hidden;9      }10    }11
12    [data-slot="label"] {13      @apply w-fit;14    }15
16    [data-slot="description"] {17      @apply px-1;18    }19  }20}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

.color-field – 最小样式的根容器（flex flex-col gap-1）

Note: 子组件（Label、Description、FieldError）有各自的 CSS 类与样式。请参阅各自文档了解自定义选项。ColorField.Group 样式见下方 API 参考。

交互状态

ColorField 根据状态自动管理以下 data 属性：

Invalid：[data-invalid="true"] 或 [aria-invalid="true"] - 无效时自动隐藏 description slot
Required：[data-required="true"] - isRequired 为 true 时应用
Disabled：[data-disabled="true"] - isDisabled 为 true 时应用
Focus Within：[data-focus-within="true"] - 任一子 input 聚焦时应用

API 参考

ColorField

ColorField 继承 React Aria ColorField 组件的所有属性。

Base Props

Prop	类型	默认值	描述
`children`	`React.ReactNode \| (values: ColorFieldRenderProps) => React.ReactNode`	-	子组件（Label、ColorField.Group 等）或 render 函数
`className`	`string \| (values: ColorFieldRenderProps) => string`	-	CSS 类，支持 render props
`style`	`React.CSSProperties \| (values: ColorFieldRenderProps) => React.CSSProperties`	-	内联样式，支持 render props
`fullWidth`	`boolean`	`false`	是否占满容器宽度
`id`	`string`	-	元素唯一标识符
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, ColorFieldRenderProps>`	-	使用自定义 render 函数覆盖默认 DOM 元素

Value Props

Prop	类型	默认值	描述
`value`	`Color \| null`	-	当前值（受控）
`defaultValue`	`Color \| null`	-	默认值（非受控）
`onChange`	`(color: Color \| null) => void`	-	值变化时的回调

Channel Props

Prop	类型	默认值	描述
`colorSpace`	`ColorSpace`	-	提供 `channel` 时颜色字段操作的颜色空间
`channel`	`ColorChannel`	-	要编辑的颜色通道。未提供时编辑 hex 值

Validation Props

Prop	类型	默认值	描述
`isRequired`	`boolean`	`false`	表单提交前是否必须输入
`isInvalid`	`boolean`	-	值是否无效
`validate`	`(value: Color) => ValidationError \| true \| null \| undefined`	-	自定义验证函数
`validationBehavior`	`'native' \| 'aria'`	`'native'`	使用原生 HTML 表单验证还是 ARIA 属性

State Props

Prop	类型	默认值	描述
`isDisabled`	`boolean`	-	是否禁用
`isReadOnly`	`boolean`	-	是否可选中但不可更改
`isWheelDisabled`	`boolean`	-	是否禁用滚轮更改值

Form Props

Prop	类型	默认值	描述
`name`	`string`	-	HTML 表单提交时 input 元素的名称
`autoFocus`	`boolean`	-	渲染时是否自动聚焦

Accessibility Props

Prop	类型	默认值	描述
`aria-label`	`string`	-	无可见标签时的无障碍标签
`aria-labelledby`	`string`	-	标注此字段的元素 ID
`aria-describedby`	`string`	-	描述此字段的元素 ID
`aria-details`	`string`	-	包含附加详情的元素 ID

Composition Components

ColorField 与以下需单独导入并直接使用的组件配合：

Label - 来自 @lenso/ui 的字段标签组件
ColorField.Group - 颜色输入组组件（见下方文档）
ColorField.Input - ColorField.Group 内的 input 元素
ColorField.Prefix / ColorField.Suffix - 输入组的前缀与后缀 slot
ColorSwatch - 来自 @lenso/ui 的颜色预览组件
Description - 来自 @lenso/ui 的帮助文本组件
FieldError - 来自 @lenso/ui 的验证错误消息

每个组件有各自的 props API。在 ColorField 内直接使用它们进行组合：

1import {ColorField, Label, ColorSwatch, Description, FieldError, parseColor} from '@lenso/ui';2
3<ColorField4  isRequired5  isInvalid={hasError}6  value={color}7  onChange={setColor}8>9  <Label>Brand Color</Label>10  <ColorField.Group>11    <ColorField.Prefix>12      <ColorSwatch color={color?.toString("hex") || "#E4E4E7"} />13    </ColorField.Prefix>14    <ColorField.Input />15  </ColorField.Group>16  <Description>Select your brand's primary color.</Description>17  <FieldError>Please enter a valid color.</FieldError>18</ColorField>

Color Types

ColorField 使用 React Aria Components 的 Color 对象：

1import {parseColor} from '@lenso/ui';2
3// Parse from hex string4const color = parseColor('#3B82F6');5
6// Get hex string from color7const hex = color.toString('hex'); // "#3b82f6"8
9// Get RGB values10const rgb = color.toString('rgb'); // "rgb(59, 130, 246)"11
12// Use in ColorField13<ColorField value={color} onChange={setColor}>14  {/* ... */}15</ColorField>

Render Props

对 className、style 或 children 使用 render props 时，可使用以下值：

Prop	类型	描述
`isDisabled`	`boolean`	字段是否禁用
`isInvalid`	`boolean`	字段是否当前无效
`isReadOnly`	`boolean`	字段是否只读
`isRequired`	`boolean`	字段是否必填
`isFocused`	`boolean`	字段是否当前聚焦
`isFocusWithin`	`boolean`	是否有子元素聚焦
`isFocusVisible`	`boolean`	焦点是否可见（键盘导航）

ColorField.Group

ColorField.Group 接受 React Aria Group 组件的所有属性，以及以下属性：

Prop	类型	默认值	描述
`className`	`string`	-	与组件样式合并的 Tailwind 类
`fullWidth`	`boolean`	`false`	颜色输入组是否占满容器宽度
`variant`	`"primary" \| "secondary"`	`"primary"`	视觉变体。`primary` 为默认带阴影样式；`secondary` 为低强调无阴影，适用于 Surface 内
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, GroupRenderProps>`	-	使用自定义 render 函数覆盖默认 DOM 元素

ColorField.Input

ColorField.Input 接受 React Aria Input 组件的所有属性，以及以下属性：

Prop	类型	默认值	描述
`className`	`string`	-	与组件样式合并的 Tailwind 类
`placeholder`	`string`	-	为空时显示的占位文本

ColorField.Prefix

ColorField.Prefix 接受标准 HTML div 属性：

Prop	类型	默认值	描述
`className`	`string`	-	与组件样式合并的 Tailwind 类
`children`	`ReactNode`	-	前缀 slot 中显示的内容

ColorField.Suffix

ColorField.Suffix 接受标准 HTML div 属性：

Prop	类型	默认值	描述
`className`	`string`	-	与组件样式合并的 Tailwind 类
`children`	`ReactNode`	-	后缀 slot 中显示的内容

ColorField.Group Styling

Customizing the component classes

基础类驱动每个实例。使用 @layer components 一次性覆盖。

1@layer components {2  .color-input-group {3    @apply inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;4
5    &:hover,6    &[data-hovered="true"] {7      @apply bg-field-hover;8    }9
10    &[data-focus-within="true"],11    &:focus-within {12      @apply status-focused-field;13    }14
15    &[data-invalid="true"] {16      @apply status-invalid-field;17    }18
19    &[data-disabled="true"],20    &[aria-disabled="true"] {21      @apply status-disabled;22    }23  }24
25  .color-input-group__input {26    @apply flex flex-1 items-center rounded-none border-0 bg-transparent px-3 py-2 shadow-none outline-none;27  }28
29  .color-input-group__prefix,30  .color-input-group__suffix {31    @apply shrink-0 text-field-placeholder flex items-center;32  }33}

ColorField.Group CSS Classes

.color-input-group – 根容器样式
.color-input-group__input – Input 包装器样式
.color-input-group__prefix – 前缀元素样式
.color-input-group__suffix – 后缀元素样式

ColorField.Group Interactive States

Hover：:hover 或 [data-hovered="true"]
Focus Within：[data-focus-within="true"] 或 :focus-within
Invalid：[data-invalid="true"]（与 aria-invalid 同步）
Disabled：[data-disabled="true"] 或 [aria-disabled="true"]

ColorField 颜色输入框

用法

组件结构

示例

变体

表面样式

带描述

必填字段

禁用

宽度充满

表单校验

分量编辑

受控组件

表单示例

渲染函数

自定义样式

Tailwind CSS

全局 CSS

样式参考

CSS 类

交互状态

API 参考

ColorField

Base Props

Value Props

Channel Props

Validation Props

State Props

Form Props

Accessibility Props

Composition Components

Color Types

Render Props

ColorField.Group

ColorField.Input

ColorField.Prefix

ColorField.Suffix

ColorField.Group Styling

Customizing the component classes

ColorField.Group CSS Classes

ColorField.Group Interactive States

相关组件