Specialized inputs

AppColorField

A colour swatch beside a hex input, both editing one value.

<app-color-field label="Accent" name="Accent" value="#4F46E5" />

<app-color-field> is for the handful of places a user picks a colour: a brand accent in settings, a tag colour, a chart series. The swatch opens the OS picker; the text box takes a pasted hex.

Both halves are there on purpose. A bare <input type="color"> cannot be typed into — a keyboard or screen-reader user, or anyone with a hex from a brand guide, would be stuck. The text box is the accessible path and the field that posts; the swatch is tabindex="-1" and unnamed.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the field above it.

<app-color-field label="Accent colour" name="pg-color" value="#4F46E5" />

Basic

A value and a name. Both controls edit the same colour.

Picking an accent
Type a hex into the box, or click the swatch to use the OS picker.
Show code 
<app-color-field label="Accent colour" name="Accent" value="#4F46E5" />
The swatch lags the text box by designA colour input only accepts a complete six-digit hex, so it is updated once the typed value is complete rather than on every keystroke — otherwise it would flick to black halfway through #4F4.

Sizes

Three sizes, the same sm / md / lg contract as <app-input>. The swatch and hex box resize together. Default (md) suits almost everything; use sm inside dense settings rows, lg for a marketing-scale field.

Small, medium and large
Both halves of the control track the size.
Show code 
<app-color-field label="Small" name="Accent" size="sm" … />
<app-color-field label="Medium" name="Accent" … />
<app-color-field label="Large" name="Accent" size="lg" … />

States

The same label / required / hint / error contract as every other field, so it drops into a form beside <app-input> without looking different.

Required, hint, error and disabled
The error and hint attach to the text box, which is the labelled control.
Used for buttons and links across your portal.
Enter a 6-digit hex, e.g. #4F46E5
Show code 
<app-color-field label="Accent colour" name="Accent" required="true" … />
<app-color-field label="Accent colour" name="Accent" hint="Used for buttons and links." … />
<app-color-field label="Accent colour" name="Accent" error="Enter a 6-digit hex" … />

When to use

Use it when

  • The user genuinely needs an arbitrary colour — a brand accent, a tag colour.
  • A hex from a brand guide will be pasted in.
  • The field sits in a settings or theming form.

Reach for something else when

  • There is a fixed palette to choose from. → app-choice-chip / app-choice-card
  • The colour carries meaning (status, severity). → app-status-badge
  • It is any other single-line value. → app-input

Best practices

Do
Used for buttons and links.
Says what the colour affects. A user picking blind cannot tell whether they are about to change one button or the whole portal.
Don't
“Colour” of what? And with no hint, the user has to save and go looking to find out what changed.

Every option

The whole surface of the component, one cell per value — including states a normal example never shows together.

size — every size

size="sm"
size="md"
size="lg"

state

(default)
required
hint
Used for buttons and links.
error
Enter a 6-digit hex, e.g. #4F46E5
error + hint (error wins)
Enter a 6-digit hex, e.g. #4F46E5
disabled
required + error
Required

value — complete vs incomplete hex

value="#4F46E5" — complete, swatch matches
value="#4F4" — incomplete, swatch falls back to #000000
value="" — empty, swatch falls back to #000000

no label

label omitted — swatch aria-label falls back to "Colour"

Attributes

AttributeTypeDefaultDescription
valuestring#000000Hex colour, e.g. #4F46E5.
labelstring—Field label.
namestring—Field name on the text box — the control that posts.
idstringauto-generatedTies the label to the text box. Defaults to an auto-generated id (not name) — repeated rows sharing a name (e.g. inside AppRepeater) must not collide on id.
requiredboolfalseDraws the asterisk and sets required on the text box.
errorstring—Validation message; replaces the hint.
hintstring—Say what the colour affects.
disabledboolfalseDisables both controls.
sizesm | md | lgmdControl size. sm/lg resize the swatch and hex box together.
input-classstring—Extra classes on the control itself (the hex input) — the React className counterpart. The plain class attribute merges onto the .field wrapper instead.