ColorInput

Accepts hex, rgb() and hsl(), emits hex, and shows the contrast ratio against a colour you nominate. minContrast raises a warning, not an error — an unreadable brand colour is a legal value and blocking the form over it is the wrong call.

Live demo

Constraints

Props

Shared props

With react-hook-form

import { useForm, Controller } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { colorSchema } from "@inputcn/color/schema"
import { ColorInput } from "@/components/ui/color-input"
import { z } from "zod"

// The companion schema validates the CANONICAL value, so the resolver and the
// field can never disagree about what "valid" means.
const schema = z.object({ brand: colorSchema() })

export function Example() {
  const { control } = useForm({ resolver: zodResolver(schema) })

  return (
    <Controller
      name="brand"
      control={control}
      render={({ field, fieldState }) => (
        <ColorInput
          label="Brand colour"
          {...field}
          aria-invalid={fieldState.invalid}
        />
      )}
    />
  )
}

With a Server Action

import { ColorInput } from "@/components/ui/color-input"

export default function Page() {
  return (
    <form action={save}>
      <ColorInput name="brand" label="Brand colour" />
      <button>Save</button>
    </form>
  )
}

async function save(data: FormData) {
  "use server"
  // The hidden canonical input carries the real value, not the display text.
  const brand = data.get("brand") // "#CDF25C"
}

Keyboard

Worth knowing

Emits string, for example "#CDF25C". Keyboard operation is covered by automated tests; screen readers have not been verified yet.