WorkDS Docs Homepage

Color Field

Displays a hex color field input with a swatch.

Props

defaultValue

string

invalid

boolean

size

123

suppressPasswordManagers

boolean

type

numbersearchtimetexthiddentelurlemaildatedatetime-localmonthpasswordweek

value

string

variant

softclassicsurface

Deprecated

state

deprecated
disablednormalread-onlyinvalid

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Usage

Controlled

Use value and onValueChange to create a controlled Color Field. The onValueChange callback returns valid hex colors only.

Variants

Dashboard

2 variants found

ColorField in Edit Brandingdashboard

/branding/edit

ColorField in Edit Brandingdashboard

/branding/edit

Context

PropTypeDefaultRequired
defaultValue
string—no
invalid
boolean—no
size
Responsive<"1" | "2" | "3">—no
statedeprecated
"disabled" | "normal" | "read-only" | "invalid"—no
suppressPasswordManagers
boolean—no
type
"number" | "search" | "time" | "text" | "hidden" | "tel" | "url" | "email" | "date" | "datetime-local" | "month" | "password" | "week"—no
value
string—no
variant
"soft" | "classic" | "surface"—no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

stateType: "disabled" | "normal" | "read-only" | "invalid"

Usage

Used 10 times across 1 package

Dashboard
10

Where it's used

2 files

/branding/edit

packages/dashboard/src/app/(private)/(chromeless)/branding/edit/edit-branding.tsx8
packages/dashboard/src/components/onboarding-flows/branding-onboarding-step-content.tsx2