Color picker

Introduction

ColorPicker sets type="color" on the shared Field input render path. Browsers show a native color well; dehydrated values are typically #rrggbb. Pair with .hex_color() validation when you also accept typed hex in other fields, or keep ColorPicker for the constrained UI.

Each variation below includes a detailed explanation, the fluent API to paste into your schema, and light/dark screenshots of the rendered control.

Basic color picker

Labeled color well for brand colors, status accents, and theme tokens.

ColorPicker.make('brand_color')
    .label('Brand color')
    .default('#0ea5e9')

Orbit Basic color picker (light)

Orbit Basic color picker (dark)

Required brand color

Shared Field helpers apply — require a selection and optionally disable on view operations.

ColorPicker.make('accent')
    .label('Accent')
    .required()
    .disabled_on('view')

Orbit Required brand color (light)

Orbit Required brand color (dark)

With helper and hint

Document contrast or usage with helper/hint chrome around the native control.

ColorPicker.make('sidebar')
    .label('Sidebar')
    .hint('Used in the customer portal')
    .helper_text('Prefer WCAG AA contrast against white.')

Orbit With helper and hint (light)

Orbit With helper and hint (dark)

Closures work on .label(), .helper_text(), .placeholder(), .visible(), .disabled(), and .required() where applicable — see Form closures.