Color picker

Select a colour value via a colour wheel, hex input, or named-palette grid.

The Color picker captures a colour value as a hex string. Three input modes: visual wheel, hex/RGB text input, or a constrained named-palette grid (useful when you want users to stay on brand).

Binds to SharePoint's Text column.

Common properties

PropertyDescription
label
string
Visible label.
description
string
Helper text.
required
boolean
default: false
Marks the field required.
readOnly
boolean
default: false
Disables editing.

Type-specific properties

PropertyDescription
defaultValue
string
default: #000000
Initial colour as a hex string, e.g. #1e8a2e. Used on new forms when no value is stored.

JavaScript recipes

Read the picked colour

const hex = f365.field('BrandColor').value as string; // e.g. "#1e8a2e"

Set programmatically

f365.field('BrandColor').value = '#1e8a2e';

React to a colour change

f365.field('BrandColor').on('change', (value) => {
  f365.field('Preview').value = `Selected ${value as string}`;
});

Mirror the chosen colour into another field on any change

f365.events.onChange((e) => {
  if (e.fieldKey !== 'BrandColor') return;
  f365.field('AccentColor').value = e.newValue as string;
});

Related articles

  • Text field

    Single-line text input, the foundation field for names, codes, and short free-text.

  • Custom HTML

    Drop arbitrary HTML into the form, escape hatch for embeds, third-party widgets, and content the standard components don't cover.