Registry Index

Search the catalog

Type to search items across every indexed registry, or pick a page.

ComponentReactregistry:ui1 dependency

ColorInput

color-input

Focusable swatch button that opens the OS-native color picker and returns the chosen hex.

@whiskeyjackRegistry JSON
Live, loading

Starting the live preview…

Runs in a sandboxed frame on a separate origin, in its registry's own theme. Mounted with no props — an item that paints an empty box is given its name as text, and some items need input to show anything.

Notes from the author

Presentational and i18n-agnostic, so pass a translated aria-label. Use it for a custom accent or a gradient stop, and pair it with applyAccentColor to retint the whole UI from the chosen hex. `unset` renders the "nothing chosen yet" state while still opening the picker at `value`.
@whiskeyjack

More from @whiskeyjack

All 16 items
PullToRefreshIndicator
pull-to-refresh-indicator
Component
Textarea
textarea
Component
BottomNav
bottom-nav
Component
DisclosureToggle
disclosure-toggle
Component
EmptyState
empty-state
Component
Input
input
Component
ProgressBar
progress-bar
Component
SearchField
search-field
Component