Color Picker

A color picker is a UI component that allows users to select a color. It is modeled after the color picker in Figma, considered to be best in class.

Lucide

color

Installation

npx kibo-ui@latest add color-picker

Features

Interactive color selection with drag and drop functionality
Hue and alpha sliders for precise color adjustments
EyeDropper tool for picking colors from anywhere on screen
Multiple color format outputs (HEX, RGB, CSS, HSL)
Real-time color preview
Fully customizable through className and props

Props

The color picker is made up of the following subcomponents:

ColorPicker

The ColorPicker component is used to display a color picker.

Prop	Type	Default
`defaultChecked?`	`boolean`	-
`defaultValue?`	`(string \| number \| readonly string[]) & ColorLike`	-
`suppressContentEditableWarning?`	`boolean`	-
`suppressHydrationWarning?`	`boolean`	-
`accessKey?`	`string`	-
`autoCapitalize?`	`"off" \| "none" \| "on" \| "sentences" \| "words" \| "characters" \| (string & {})`	-
`autoFocus?`	`boolean`	-
`className?`	`string`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`contextMenu?`	`string`	-
`dir?`	`string`	-
`draggable?`	`Booleanish`	-
`enterKeyHint?`	`"enter" \| "done" \| "go" \| "next" \| "previous" \| "search" \| "send"`	-
`hidden?`	`boolean`	-
`id?`	`string`	-
`lang?`	`string`	-
`nonce?`	`string`	-
`slot?`	`string`	-
`spellCheck?`	`Booleanish`	-
`style?`	`CSSProperties`	-
`tabIndex?`	`number`	-
`title?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`radioGroup?`	`string`	-
`role?`	`AriaRole`	-
`about?`	`string`	-
`content?`	`string`	-
`datatype?`	`string`	-
`inlist?`	`any`	-
`prefix?`	`string`	-
`property?`	`string`	-
`rel?`	`string`	-
`resource?`	`string`	-
`rev?`	`string`	-
`typeof?`	`string`	-
`vocab?`	`string`	-
`autoCorrect?`	`string`	-
`autoSave?`	`string`	-
`color?`	`string`	-
`itemProp?`	`string`	-
`itemScope?`	`boolean`	-
`itemType?`	`string`	-
`itemID?`	`string`	-
`itemRef?`	`string`	-
`results?`	`number`	-
`security?`	`string`	-
`unselectable?`	`"off" \| "on"`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`popoverTarget?`	`string`	-
`inert?`	`boolean`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`is?`	`string`	-
`aria-activedescendant?`	`string`	-
`aria-atomic?`	`Booleanish`	-
`aria-autocomplete?`	`"none" \| "list" \| "inline" \| "both"`	-
`aria-braillelabel?`	`string`	-
`aria-brailleroledescription?`	`string`	-
`aria-busy?`	`Booleanish`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-colcount?`	`number`	-
`aria-colindex?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colspan?`	`number`	-
`aria-controls?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-describedby?`	`string`	-
`aria-description?`	`string`	-
`aria-details?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-dropeffect?`	`"none" \| "link" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-errormessage?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-flowto?`	`string`	-
`aria-grabbed?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-hidden?`	`Booleanish`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-keyshortcuts?`	`string`	-
`aria-label?`	`string`	-
`aria-labelledby?`	`string`	-
`aria-level?`	`number`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-modal?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-owns?`	`string`	-
`aria-placeholder?`	`string`	-
`aria-posinset?`	`number`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-readonly?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-required?`	`Booleanish`	-
`aria-roledescription?`	`string`	-
`aria-rowcount?`	`number`	-
`aria-rowindex?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowspan?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-setsize?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-valuemax?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuenow?`	`number`	-
`aria-valuetext?`	`string`	-
`children?`	`ReactNode`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`onCopy?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCopyCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCut?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCutCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onPaste?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onPasteCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCompositionEnd?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionStart?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionUpdate?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onFocus?`	`FocusEventHandler<HTMLDivElement>`	-
`onFocusCapture?`	`FocusEventHandler<HTMLDivElement>`	-
`onBlur?`	`FocusEventHandler<HTMLDivElement>`	-
`onBlurCapture?`	`FocusEventHandler<HTMLDivElement>`	-
`onChange?`	`FormEventHandler<HTMLDivElement> & ((value: ColorLike) => void)`	-
`onChangeCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onBeforeInput?`	`FormEventHandler<HTMLDivElement>`	-
`onBeforeInputCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onInput?`	`FormEventHandler<HTMLDivElement>`	-
`onInputCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onReset?`	`FormEventHandler<HTMLDivElement>`	-
`onResetCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onSubmit?`	`FormEventHandler<HTMLDivElement>`	-
`onSubmitCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onInvalid?`	`FormEventHandler<HTMLDivElement>`	-
`onInvalidCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onLoad?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onError?`	`ReactEventHandler<HTMLDivElement>`	-
`onErrorCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onKeyDown?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyPress?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyUp?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onAbort?`	`ReactEventHandler<HTMLDivElement>`	-
`onAbortCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlay?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayThrough?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onDurationChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onDurationChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEmptied?`	`ReactEventHandler<HTMLDivElement>`	-
`onEmptiedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEncrypted?`	`ReactEventHandler<HTMLDivElement>`	-
`onEncryptedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEnded?`	`ReactEventHandler<HTMLDivElement>`	-
`onEndedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedData?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedDataCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedMetadata?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadStart?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadStartCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPause?`	`ReactEventHandler<HTMLDivElement>`	-
`onPauseCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlay?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlayCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlaying?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlayingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onProgress?`	`ReactEventHandler<HTMLDivElement>`	-
`onProgressCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onRateChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onRateChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onResize?`	`ReactEventHandler<HTMLDivElement>`	-
`onResizeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeeked?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeekedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeeking?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeekingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onStalled?`	`ReactEventHandler<HTMLDivElement>`	-
`onStalledCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSuspend?`	`ReactEventHandler<HTMLDivElement>`	-
`onSuspendCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onTimeUpdate?`	`ReactEventHandler<HTMLDivElement>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onVolumeChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onWaiting?`	`ReactEventHandler<HTMLDivElement>`	-
`onWaitingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onAuxClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenu?`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenuCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onDrag?`	`DragEventHandler<HTMLDivElement>`	-
`onDragCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnd?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEndCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnter?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnterCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragExit?`	`DragEventHandler<HTMLDivElement>`	-
`onDragExitCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragLeave?`	`DragEventHandler<HTMLDivElement>`	-
`onDragLeaveCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragOver?`	`DragEventHandler<HTMLDivElement>`	-
`onDragOverCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragStart?`	`DragEventHandler<HTMLDivElement>`	-
`onDragStartCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDrop?`	`DragEventHandler<HTMLDivElement>`	-
`onDropCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onMouseDown?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDownCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseEnter?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseLeave?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMove?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMoveCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOut?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOutCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOver?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOverCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUp?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUpCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onSelect?`	`ReactEventHandler<HTMLDivElement>`	-
`onSelectCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onTouchCancel?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchCancelCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEnd?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEndCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMove?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMoveCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStart?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStartCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onPointerDown?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerDownCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMove?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMoveCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUp?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUpCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancel?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancelCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerEnter?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerLeave?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOver?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOverCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOut?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOutCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onScroll?`	`UIEventHandler<HTMLDivElement>`	-
`onScrollCapture?`	`UIEventHandler<HTMLDivElement>`	-
`onWheel?`	`WheelEventHandler<HTMLDivElement>`	-
`onWheelCapture?`	`WheelEventHandler<HTMLDivElement>`	-
`onAnimationStart?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEnd?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIteration?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onToggle?`	`ToggleEventHandler<HTMLDivElement>`	-
`onBeforeToggle?`	`ToggleEventHandler<HTMLDivElement>`	-
`onTransitionCancel?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEnd?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRun?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStart?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStartCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`value?`	`ColorLike`	-

ColorPickerSelection

The ColorPickerSelection component is used to display the selected color.

Prop	Type	Default
`defaultChecked?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`suppressContentEditableWarning?`	`boolean`	-
`suppressHydrationWarning?`	`boolean`	-
`accessKey?`	`string`	-
`autoCapitalize?`	`"off" \| "none" \| "on" \| "sentences" \| "words" \| "characters" \| (string & {})`	-
`autoFocus?`	`boolean`	-
`className?`	`string`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`contextMenu?`	`string`	-
`dir?`	`string`	-
`draggable?`	`Booleanish`	-
`enterKeyHint?`	`"enter" \| "done" \| "go" \| "next" \| "previous" \| "search" \| "send"`	-
`hidden?`	`boolean`	-
`id?`	`string`	-
`lang?`	`string`	-
`nonce?`	`string`	-
`slot?`	`string`	-
`spellCheck?`	`Booleanish`	-
`style?`	`CSSProperties`	-
`tabIndex?`	`number`	-
`title?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`radioGroup?`	`string`	-
`role?`	`AriaRole`	-
`about?`	`string`	-
`content?`	`string`	-
`datatype?`	`string`	-
`inlist?`	`any`	-
`prefix?`	`string`	-
`property?`	`string`	-
`rel?`	`string`	-
`resource?`	`string`	-
`rev?`	`string`	-
`typeof?`	`string`	-
`vocab?`	`string`	-
`autoCorrect?`	`string`	-
`autoSave?`	`string`	-
`color?`	`string`	-
`itemProp?`	`string`	-
`itemScope?`	`boolean`	-
`itemType?`	`string`	-
`itemID?`	`string`	-
`itemRef?`	`string`	-
`results?`	`number`	-
`security?`	`string`	-
`unselectable?`	`"off" \| "on"`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`popoverTarget?`	`string`	-
`inert?`	`boolean`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`is?`	`string`	-
`aria-activedescendant?`	`string`	-
`aria-atomic?`	`Booleanish`	-
`aria-autocomplete?`	`"none" \| "list" \| "inline" \| "both"`	-
`aria-braillelabel?`	`string`	-
`aria-brailleroledescription?`	`string`	-
`aria-busy?`	`Booleanish`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-colcount?`	`number`	-
`aria-colindex?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colspan?`	`number`	-
`aria-controls?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-describedby?`	`string`	-
`aria-description?`	`string`	-
`aria-details?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-dropeffect?`	`"none" \| "link" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-errormessage?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-flowto?`	`string`	-
`aria-grabbed?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-hidden?`	`Booleanish`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-keyshortcuts?`	`string`	-
`aria-label?`	`string`	-
`aria-labelledby?`	`string`	-
`aria-level?`	`number`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-modal?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-owns?`	`string`	-
`aria-placeholder?`	`string`	-
`aria-posinset?`	`number`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-readonly?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-required?`	`Booleanish`	-
`aria-roledescription?`	`string`	-
`aria-rowcount?`	`number`	-
`aria-rowindex?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowspan?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-setsize?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-valuemax?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuenow?`	`number`	-
`aria-valuetext?`	`string`	-
`children?`	`ReactNode`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`onCopy?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCopyCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCut?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCutCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onPaste?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onPasteCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCompositionEnd?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionStart?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionUpdate?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onFocus?`	`FocusEventHandler<HTMLDivElement>`	-
`onFocusCapture?`	`FocusEventHandler<HTMLDivElement>`	-
`onBlur?`	`FocusEventHandler<HTMLDivElement>`	-
`onBlurCapture?`	`FocusEventHandler<HTMLDivElement>`	-
`onChange?`	`FormEventHandler<HTMLDivElement>`	-
`onChangeCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onBeforeInput?`	`FormEventHandler<HTMLDivElement>`	-
`onBeforeInputCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onInput?`	`FormEventHandler<HTMLDivElement>`	-
`onInputCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onReset?`	`FormEventHandler<HTMLDivElement>`	-
`onResetCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onSubmit?`	`FormEventHandler<HTMLDivElement>`	-
`onSubmitCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onInvalid?`	`FormEventHandler<HTMLDivElement>`	-
`onInvalidCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onLoad?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onError?`	`ReactEventHandler<HTMLDivElement>`	-
`onErrorCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onKeyDown?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyPress?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyUp?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onAbort?`	`ReactEventHandler<HTMLDivElement>`	-
`onAbortCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlay?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayThrough?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onDurationChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onDurationChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEmptied?`	`ReactEventHandler<HTMLDivElement>`	-
`onEmptiedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEncrypted?`	`ReactEventHandler<HTMLDivElement>`	-
`onEncryptedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEnded?`	`ReactEventHandler<HTMLDivElement>`	-
`onEndedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedData?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedDataCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedMetadata?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadStart?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadStartCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPause?`	`ReactEventHandler<HTMLDivElement>`	-
`onPauseCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlay?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlayCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlaying?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlayingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onProgress?`	`ReactEventHandler<HTMLDivElement>`	-
`onProgressCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onRateChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onRateChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onResize?`	`ReactEventHandler<HTMLDivElement>`	-
`onResizeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeeked?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeekedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeeking?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeekingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onStalled?`	`ReactEventHandler<HTMLDivElement>`	-
`onStalledCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSuspend?`	`ReactEventHandler<HTMLDivElement>`	-
`onSuspendCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onTimeUpdate?`	`ReactEventHandler<HTMLDivElement>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onVolumeChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onWaiting?`	`ReactEventHandler<HTMLDivElement>`	-
`onWaitingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onAuxClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenu?`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenuCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onDrag?`	`DragEventHandler<HTMLDivElement>`	-
`onDragCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnd?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEndCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnter?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnterCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragExit?`	`DragEventHandler<HTMLDivElement>`	-
`onDragExitCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragLeave?`	`DragEventHandler<HTMLDivElement>`	-
`onDragLeaveCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragOver?`	`DragEventHandler<HTMLDivElement>`	-
`onDragOverCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragStart?`	`DragEventHandler<HTMLDivElement>`	-
`onDragStartCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDrop?`	`DragEventHandler<HTMLDivElement>`	-
`onDropCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onMouseDown?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDownCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseEnter?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseLeave?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMove?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMoveCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOut?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOutCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOver?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOverCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUp?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUpCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onSelect?`	`ReactEventHandler<HTMLDivElement>`	-
`onSelectCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onTouchCancel?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchCancelCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEnd?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEndCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMove?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMoveCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStart?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStartCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onPointerDown?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerDownCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMove?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMoveCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUp?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUpCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancel?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancelCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerEnter?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerLeave?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOver?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOverCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOut?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOutCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onScroll?`	`UIEventHandler<HTMLDivElement>`	-
`onScrollCapture?`	`UIEventHandler<HTMLDivElement>`	-
`onWheel?`	`WheelEventHandler<HTMLDivElement>`	-
`onWheelCapture?`	`WheelEventHandler<HTMLDivElement>`	-
`onAnimationStart?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEnd?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIteration?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onToggle?`	`ToggleEventHandler<HTMLDivElement>`	-
`onBeforeToggle?`	`ToggleEventHandler<HTMLDivElement>`	-
`onTransitionCancel?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEnd?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRun?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStart?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStartCapture?`	`TransitionEventHandler<HTMLDivElement>`	-

ColorPickerHue

The ColorPickerHue component is used to display the hue slider.

Prop	Type	Default
`defaultChecked?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`suppressContentEditableWarning?`	`boolean`	-
`suppressHydrationWarning?`	`boolean`	-
`accessKey?`	`string`	-
`autoCapitalize?`	`"off" \| "none" \| "on" \| "sentences" \| "words" \| "characters" \| (string & {})`	-
`autoFocus?`	`boolean`	-
`className?`	`string`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`contextMenu?`	`string`	-
`dir?`	`string`	-
`draggable?`	`Booleanish`	-
`enterKeyHint?`	`"enter" \| "done" \| "go" \| "next" \| "previous" \| "search" \| "send"`	-
`hidden?`	`boolean`	-
`id?`	`string`	-
`lang?`	`string`	-
`nonce?`	`string`	-
`slot?`	`string`	-
`spellCheck?`	`Booleanish`	-
`style?`	`CSSProperties`	-
`tabIndex?`	`number`	-
`title?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`radioGroup?`	`string`	-
`role?`	`AriaRole`	-
`about?`	`string`	-
`content?`	`string`	-
`datatype?`	`string`	-
`inlist?`	`any`	-
`prefix?`	`string`	-
`property?`	`string`	-
`rel?`	`string`	-
`resource?`	`string`	-
`rev?`	`string`	-
`typeof?`	`string`	-
`vocab?`	`string`	-
`autoCorrect?`	`string`	-
`autoSave?`	`string`	-
`color?`	`string`	-
`itemProp?`	`string`	-
`itemScope?`	`boolean`	-
`itemType?`	`string`	-
`itemID?`	`string`	-
`itemRef?`	`string`	-
`results?`	`number`	-
`security?`	`string`	-
`unselectable?`	`"off" \| "on"`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`popoverTarget?`	`string`	-
`inert?`	`boolean`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`is?`	`string`	-
`aria-activedescendant?`	`string`	-
`aria-atomic?`	`Booleanish`	-
`aria-autocomplete?`	`"none" \| "list" \| "inline" \| "both"`	-
`aria-braillelabel?`	`string`	-
`aria-brailleroledescription?`	`string`	-
`aria-busy?`	`Booleanish`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-colcount?`	`number`	-
`aria-colindex?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colspan?`	`number`	-
`aria-controls?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-describedby?`	`string`	-
`aria-description?`	`string`	-
`aria-details?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-dropeffect?`	`"none" \| "link" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-errormessage?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-flowto?`	`string`	-
`aria-grabbed?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-hidden?`	`Booleanish`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-keyshortcuts?`	`string`	-
`aria-label?`	`string`	-
`aria-labelledby?`	`string`	-
`aria-level?`	`number`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-modal?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-owns?`	`string`	-
`aria-placeholder?`	`string`	-
`aria-posinset?`	`number`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-readonly?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-required?`	`Booleanish`	-
`aria-roledescription?`	`string`	-
`aria-rowcount?`	`number`	-
`aria-rowindex?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowspan?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-setsize?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-valuemax?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuenow?`	`number`	-
`aria-valuetext?`	`string`	-
`children?`	`ReactNode`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`onCopy?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCopyCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCut?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCutCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onPaste?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onPasteCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCompositionEnd?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionStart?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionUpdate?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onFocus?`	`FocusEventHandler<HTMLDivElement>`	-
`onFocusCapture?`	`FocusEventHandler<HTMLDivElement>`	-
`onBlur?`	`FocusEventHandler<HTMLDivElement>`	-
`onBlurCapture?`	`FocusEventHandler<HTMLDivElement>`	-
`onChange?`	`FormEventHandler<HTMLDivElement>`	-
`onChangeCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onBeforeInput?`	`FormEventHandler<HTMLDivElement>`	-
`onBeforeInputCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onInput?`	`FormEventHandler<HTMLDivElement>`	-
`onInputCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onReset?`	`FormEventHandler<HTMLDivElement>`	-
`onResetCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onSubmit?`	`FormEventHandler<HTMLDivElement>`	-
`onSubmitCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onInvalid?`	`FormEventHandler<HTMLDivElement>`	-
`onInvalidCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onLoad?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onError?`	`ReactEventHandler<HTMLDivElement>`	-
`onErrorCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onKeyDown?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyPress?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyUp?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onAbort?`	`ReactEventHandler<HTMLDivElement>`	-
`onAbortCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlay?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayThrough?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onDurationChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onDurationChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEmptied?`	`ReactEventHandler<HTMLDivElement>`	-
`onEmptiedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEncrypted?`	`ReactEventHandler<HTMLDivElement>`	-
`onEncryptedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEnded?`	`ReactEventHandler<HTMLDivElement>`	-
`onEndedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedData?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedDataCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedMetadata?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadStart?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadStartCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPause?`	`ReactEventHandler<HTMLDivElement>`	-
`onPauseCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlay?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlayCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlaying?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlayingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onProgress?`	`ReactEventHandler<HTMLDivElement>`	-
`onProgressCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onRateChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onRateChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onResize?`	`ReactEventHandler<HTMLDivElement>`	-
`onResizeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeeked?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeekedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeeking?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeekingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onStalled?`	`ReactEventHandler<HTMLDivElement>`	-
`onStalledCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSuspend?`	`ReactEventHandler<HTMLDivElement>`	-
`onSuspendCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onTimeUpdate?`	`ReactEventHandler<HTMLDivElement>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onVolumeChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onWaiting?`	`ReactEventHandler<HTMLDivElement>`	-
`onWaitingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onAuxClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenu?`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenuCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onDrag?`	`DragEventHandler<HTMLDivElement>`	-
`onDragCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnd?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEndCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnter?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnterCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragExit?`	`DragEventHandler<HTMLDivElement>`	-
`onDragExitCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragLeave?`	`DragEventHandler<HTMLDivElement>`	-
`onDragLeaveCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragOver?`	`DragEventHandler<HTMLDivElement>`	-
`onDragOverCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragStart?`	`DragEventHandler<HTMLDivElement>`	-
`onDragStartCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDrop?`	`DragEventHandler<HTMLDivElement>`	-
`onDropCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onMouseDown?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDownCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseEnter?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseLeave?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMove?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMoveCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOut?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOutCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOver?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOverCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUp?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUpCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onSelect?`	`ReactEventHandler<HTMLDivElement>`	-
`onSelectCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onTouchCancel?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchCancelCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEnd?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEndCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMove?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMoveCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStart?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStartCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onPointerDown?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerDownCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMove?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMoveCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUp?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUpCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancel?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancelCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerEnter?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerLeave?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOver?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOverCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOut?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOutCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onScroll?`	`UIEventHandler<HTMLDivElement>`	-
`onScrollCapture?`	`UIEventHandler<HTMLDivElement>`	-
`onWheel?`	`WheelEventHandler<HTMLDivElement>`	-
`onWheelCapture?`	`WheelEventHandler<HTMLDivElement>`	-
`onAnimationStart?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEnd?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIteration?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onToggle?`	`ToggleEventHandler<HTMLDivElement>`	-
`onBeforeToggle?`	`ToggleEventHandler<HTMLDivElement>`	-
`onTransitionCancel?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEnd?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRun?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStart?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStartCapture?`	`TransitionEventHandler<HTMLDivElement>`	-

ColorPickerAlpha

The ColorPickerAlpha component is used to display the alpha slider.

Prop	Type	Default
`defaultChecked?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`suppressContentEditableWarning?`	`boolean`	-
`suppressHydrationWarning?`	`boolean`	-
`accessKey?`	`string`	-
`autoCapitalize?`	`"off" \| "none" \| "on" \| "sentences" \| "words" \| "characters" \| (string & {})`	-
`autoFocus?`	`boolean`	-
`className?`	`string`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`contextMenu?`	`string`	-
`dir?`	`string`	-
`draggable?`	`Booleanish`	-
`enterKeyHint?`	`"enter" \| "done" \| "go" \| "next" \| "previous" \| "search" \| "send"`	-
`hidden?`	`boolean`	-
`id?`	`string`	-
`lang?`	`string`	-
`nonce?`	`string`	-
`slot?`	`string`	-
`spellCheck?`	`Booleanish`	-
`style?`	`CSSProperties`	-
`tabIndex?`	`number`	-
`title?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`radioGroup?`	`string`	-
`role?`	`AriaRole`	-
`about?`	`string`	-
`content?`	`string`	-
`datatype?`	`string`	-
`inlist?`	`any`	-
`prefix?`	`string`	-
`property?`	`string`	-
`rel?`	`string`	-
`resource?`	`string`	-
`rev?`	`string`	-
`typeof?`	`string`	-
`vocab?`	`string`	-
`autoCorrect?`	`string`	-
`autoSave?`	`string`	-
`color?`	`string`	-
`itemProp?`	`string`	-
`itemScope?`	`boolean`	-
`itemType?`	`string`	-
`itemID?`	`string`	-
`itemRef?`	`string`	-
`results?`	`number`	-
`security?`	`string`	-
`unselectable?`	`"off" \| "on"`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`popoverTarget?`	`string`	-
`inert?`	`boolean`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`is?`	`string`	-
`aria-activedescendant?`	`string`	-
`aria-atomic?`	`Booleanish`	-
`aria-autocomplete?`	`"none" \| "list" \| "inline" \| "both"`	-
`aria-braillelabel?`	`string`	-
`aria-brailleroledescription?`	`string`	-
`aria-busy?`	`Booleanish`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-colcount?`	`number`	-
`aria-colindex?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colspan?`	`number`	-
`aria-controls?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-describedby?`	`string`	-
`aria-description?`	`string`	-
`aria-details?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-dropeffect?`	`"none" \| "link" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-errormessage?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-flowto?`	`string`	-
`aria-grabbed?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-hidden?`	`Booleanish`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-keyshortcuts?`	`string`	-
`aria-label?`	`string`	-
`aria-labelledby?`	`string`	-
`aria-level?`	`number`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-modal?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-owns?`	`string`	-
`aria-placeholder?`	`string`	-
`aria-posinset?`	`number`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-readonly?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-required?`	`Booleanish`	-
`aria-roledescription?`	`string`	-
`aria-rowcount?`	`number`	-
`aria-rowindex?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowspan?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-setsize?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-valuemax?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuenow?`	`number`	-
`aria-valuetext?`	`string`	-
`children?`	`ReactNode`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`onCopy?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCopyCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCut?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCutCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onPaste?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onPasteCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCompositionEnd?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionStart?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionUpdate?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onFocus?`	`FocusEventHandler<HTMLDivElement>`	-
`onFocusCapture?`	`FocusEventHandler<HTMLDivElement>`	-
`onBlur?`	`FocusEventHandler<HTMLDivElement>`	-
`onBlurCapture?`	`FocusEventHandler<HTMLDivElement>`	-
`onChange?`	`FormEventHandler<HTMLDivElement>`	-
`onChangeCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onBeforeInput?`	`FormEventHandler<HTMLDivElement>`	-
`onBeforeInputCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onInput?`	`FormEventHandler<HTMLDivElement>`	-
`onInputCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onReset?`	`FormEventHandler<HTMLDivElement>`	-
`onResetCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onSubmit?`	`FormEventHandler<HTMLDivElement>`	-
`onSubmitCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onInvalid?`	`FormEventHandler<HTMLDivElement>`	-
`onInvalidCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onLoad?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onError?`	`ReactEventHandler<HTMLDivElement>`	-
`onErrorCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onKeyDown?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyPress?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyUp?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onAbort?`	`ReactEventHandler<HTMLDivElement>`	-
`onAbortCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlay?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayThrough?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onDurationChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onDurationChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEmptied?`	`ReactEventHandler<HTMLDivElement>`	-
`onEmptiedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEncrypted?`	`ReactEventHandler<HTMLDivElement>`	-
`onEncryptedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEnded?`	`ReactEventHandler<HTMLDivElement>`	-
`onEndedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedData?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedDataCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedMetadata?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadStart?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadStartCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPause?`	`ReactEventHandler<HTMLDivElement>`	-
`onPauseCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlay?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlayCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlaying?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlayingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onProgress?`	`ReactEventHandler<HTMLDivElement>`	-
`onProgressCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onRateChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onRateChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onResize?`	`ReactEventHandler<HTMLDivElement>`	-
`onResizeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeeked?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeekedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeeking?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeekingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onStalled?`	`ReactEventHandler<HTMLDivElement>`	-
`onStalledCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSuspend?`	`ReactEventHandler<HTMLDivElement>`	-
`onSuspendCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onTimeUpdate?`	`ReactEventHandler<HTMLDivElement>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onVolumeChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onWaiting?`	`ReactEventHandler<HTMLDivElement>`	-
`onWaitingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onAuxClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenu?`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenuCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onDrag?`	`DragEventHandler<HTMLDivElement>`	-
`onDragCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnd?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEndCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnter?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnterCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragExit?`	`DragEventHandler<HTMLDivElement>`	-
`onDragExitCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragLeave?`	`DragEventHandler<HTMLDivElement>`	-
`onDragLeaveCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragOver?`	`DragEventHandler<HTMLDivElement>`	-
`onDragOverCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragStart?`	`DragEventHandler<HTMLDivElement>`	-
`onDragStartCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDrop?`	`DragEventHandler<HTMLDivElement>`	-
`onDropCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onMouseDown?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDownCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseEnter?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseLeave?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMove?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMoveCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOut?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOutCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOver?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOverCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUp?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUpCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onSelect?`	`ReactEventHandler<HTMLDivElement>`	-
`onSelectCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onTouchCancel?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchCancelCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEnd?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEndCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMove?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMoveCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStart?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStartCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onPointerDown?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerDownCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMove?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMoveCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUp?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUpCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancel?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancelCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerEnter?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerLeave?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOver?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOverCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOut?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOutCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onScroll?`	`UIEventHandler<HTMLDivElement>`	-
`onScrollCapture?`	`UIEventHandler<HTMLDivElement>`	-
`onWheel?`	`WheelEventHandler<HTMLDivElement>`	-
`onWheelCapture?`	`WheelEventHandler<HTMLDivElement>`	-
`onAnimationStart?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEnd?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIteration?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onToggle?`	`ToggleEventHandler<HTMLDivElement>`	-
`onBeforeToggle?`	`ToggleEventHandler<HTMLDivElement>`	-
`onTransitionCancel?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEnd?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRun?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStart?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStartCapture?`	`TransitionEventHandler<HTMLDivElement>`	-

ColorPickerOutput

The ColorPickerOutput component is used to display the output of the selected color.

Prop	Type	Default
`form?`	`string`	-
`slot?`	`string`	-
`style?`	`CSSProperties`	-
`title?`	`string`	-
`key?`	`Key`	-
`disabled?`	`boolean`	-
`formAction?`	`string \| ((formData: FormData) => void \| Promise<void>)`	-
`formEncType?`	`string`	-
`formMethod?`	`string`	-
`formNoValidate?`	`boolean`	-
`formTarget?`	`string`	-
`name?`	`string`	-
`type?`	`"button" \| "submit" \| "reset"`	-
`value?`	`string \| number \| readonly string[]`	-
`defaultChecked?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`suppressContentEditableWarning?`	`boolean`	-
`suppressHydrationWarning?`	`boolean`	-
`accessKey?`	`string`	-
`autoCapitalize?`	`"off" \| "none" \| "on" \| "sentences" \| "words" \| "characters" \| (string & {})`	-
`autoFocus?`	`boolean`	-
`className?`	`string`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`contextMenu?`	`string`	-
`dir?`	`string`	-
`draggable?`	`Booleanish`	-
`enterKeyHint?`	`"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`	-
`hidden?`	`boolean`	-
`id?`	`string`	-
`lang?`	`string`	-
`nonce?`	`string`	-
`spellCheck?`	`Booleanish`	-
`tabIndex?`	`number`	-
`translate?`	`"yes" \| "no"`	-
`radioGroup?`	`string`	-
`role?`	`AriaRole`	-
`about?`	`string`	-
`content?`	`string`	-
`datatype?`	`string`	-
`inlist?`	`any`	-
`prefix?`	`string`	-
`property?`	`string`	-
`rel?`	`string`	-
`resource?`	`string`	-
`rev?`	`string`	-
`typeof?`	`string`	-
`vocab?`	`string`	-
`autoCorrect?`	`string`	-
`autoSave?`	`string`	-
`color?`	`string`	-
`itemProp?`	`string`	-
`itemScope?`	`boolean`	-
`itemType?`	`string`	-
`itemID?`	`string`	-
`itemRef?`	`string`	-
`results?`	`number`	-
`security?`	`string`	-
`unselectable?`	`"off" \| "on"`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`popoverTarget?`	`string`	-
`inert?`	`boolean`	-
`inputMode?`	`"search" \| "text" \| "none" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`is?`	`string`	-
`aria-activedescendant?`	`string`	-
`aria-atomic?`	`Booleanish`	-
`aria-autocomplete?`	`"none" \| "list" \| "inline" \| "both"`	-
`aria-braillelabel?`	`string`	-
`aria-brailleroledescription?`	`string`	-
`aria-busy?`	`Booleanish`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-colcount?`	`number`	-
`aria-colindex?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colspan?`	`number`	-
`aria-controls?`	`string`	-
`aria-current?`	`boolean \| "time" \| "true" \| "false" \| "page" \| "step" \| "location" \| "date"`	-
`aria-describedby?`	`string`	-
`aria-description?`	`string`	-
`aria-details?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-dropeffect?`	`"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-errormessage?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-flowto?`	`string`	-
`aria-grabbed?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "dialog" \| "menu" \| "true" \| "false" \| "grid" \| "listbox" \| "tree"`	-
`aria-hidden?`	`Booleanish`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-keyshortcuts?`	`string`	-
`aria-label?`	`string`	-
`aria-labelledby?`	`string`	-
`aria-level?`	`number`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-modal?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-owns?`	`string`	-
`aria-placeholder?`	`string`	-
`aria-posinset?`	`number`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-readonly?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-required?`	`Booleanish`	-
`aria-roledescription?`	`string`	-
`aria-rowcount?`	`number`	-
`aria-rowindex?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowspan?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-setsize?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-valuemax?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuenow?`	`number`	-
`aria-valuetext?`	`string`	-
`children?`	`ReactNode`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`onCopy?`	`ClipboardEventHandler<HTMLButtonElement>`	-
`onCopyCapture?`	`ClipboardEventHandler<HTMLButtonElement>`	-
`onCut?`	`ClipboardEventHandler<HTMLButtonElement>`	-
`onCutCapture?`	`ClipboardEventHandler<HTMLButtonElement>`	-
`onPaste?`	`ClipboardEventHandler<HTMLButtonElement>`	-
`onPasteCapture?`	`ClipboardEventHandler<HTMLButtonElement>`	-
`onCompositionEnd?`	`CompositionEventHandler<HTMLButtonElement>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<HTMLButtonElement>`	-
`onCompositionStart?`	`CompositionEventHandler<HTMLButtonElement>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<HTMLButtonElement>`	-
`onCompositionUpdate?`	`CompositionEventHandler<HTMLButtonElement>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<HTMLButtonElement>`	-
`onFocus?`	`FocusEventHandler<HTMLButtonElement>`	-
`onFocusCapture?`	`FocusEventHandler<HTMLButtonElement>`	-
`onBlur?`	`FocusEventHandler<HTMLButtonElement>`	-
`onBlurCapture?`	`FocusEventHandler<HTMLButtonElement>`	-
`onChange?`	`FormEventHandler<HTMLButtonElement>`	-
`onChangeCapture?`	`FormEventHandler<HTMLButtonElement>`	-
`onBeforeInput?`	`FormEventHandler<HTMLButtonElement>`	-
`onBeforeInputCapture?`	`FormEventHandler<HTMLButtonElement>`	-
`onInput?`	`FormEventHandler<HTMLButtonElement>`	-
`onInputCapture?`	`FormEventHandler<HTMLButtonElement>`	-
`onReset?`	`FormEventHandler<HTMLButtonElement>`	-
`onResetCapture?`	`FormEventHandler<HTMLButtonElement>`	-
`onSubmit?`	`FormEventHandler<HTMLButtonElement>`	-
`onSubmitCapture?`	`FormEventHandler<HTMLButtonElement>`	-
`onInvalid?`	`FormEventHandler<HTMLButtonElement>`	-
`onInvalidCapture?`	`FormEventHandler<HTMLButtonElement>`	-
`onLoad?`	`ReactEventHandler<HTMLButtonElement>`	-
`onLoadCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onError?`	`ReactEventHandler<HTMLButtonElement>`	-
`onErrorCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onKeyDown?`	`KeyboardEventHandler<HTMLButtonElement>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<HTMLButtonElement>`	-
`onKeyPress?`	`KeyboardEventHandler<HTMLButtonElement>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<HTMLButtonElement>`	-
`onKeyUp?`	`KeyboardEventHandler<HTMLButtonElement>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<HTMLButtonElement>`	-
`onAbort?`	`ReactEventHandler<HTMLButtonElement>`	-
`onAbortCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onCanPlay?`	`ReactEventHandler<HTMLButtonElement>`	-
`onCanPlayCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onCanPlayThrough?`	`ReactEventHandler<HTMLButtonElement>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onDurationChange?`	`ReactEventHandler<HTMLButtonElement>`	-
`onDurationChangeCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onEmptied?`	`ReactEventHandler<HTMLButtonElement>`	-
`onEmptiedCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onEncrypted?`	`ReactEventHandler<HTMLButtonElement>`	-
`onEncryptedCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onEnded?`	`ReactEventHandler<HTMLButtonElement>`	-
`onEndedCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onLoadedData?`	`ReactEventHandler<HTMLButtonElement>`	-
`onLoadedDataCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onLoadedMetadata?`	`ReactEventHandler<HTMLButtonElement>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onLoadStart?`	`ReactEventHandler<HTMLButtonElement>`	-
`onLoadStartCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onPause?`	`ReactEventHandler<HTMLButtonElement>`	-
`onPauseCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onPlay?`	`ReactEventHandler<HTMLButtonElement>`	-
`onPlayCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onPlaying?`	`ReactEventHandler<HTMLButtonElement>`	-
`onPlayingCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onProgress?`	`ReactEventHandler<HTMLButtonElement>`	-
`onProgressCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onRateChange?`	`ReactEventHandler<HTMLButtonElement>`	-
`onRateChangeCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onResize?`	`ReactEventHandler<HTMLButtonElement>`	-
`onResizeCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onSeeked?`	`ReactEventHandler<HTMLButtonElement>`	-
`onSeekedCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onSeeking?`	`ReactEventHandler<HTMLButtonElement>`	-
`onSeekingCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onStalled?`	`ReactEventHandler<HTMLButtonElement>`	-
`onStalledCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onSuspend?`	`ReactEventHandler<HTMLButtonElement>`	-
`onSuspendCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onTimeUpdate?`	`ReactEventHandler<HTMLButtonElement>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onVolumeChange?`	`ReactEventHandler<HTMLButtonElement>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onWaiting?`	`ReactEventHandler<HTMLButtonElement>`	-
`onWaitingCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onAuxClick?`	`MouseEventHandler<HTMLButtonElement>`	-
`onAuxClickCapture?`	`MouseEventHandler<HTMLButtonElement>`	-
`onClick?`	`MouseEventHandler<HTMLButtonElement>`	-
`onClickCapture?`	`MouseEventHandler<HTMLButtonElement>`	-
`onContextMenu?`	`MouseEventHandler<HTMLButtonElement>`	-
`onContextMenuCapture?`	`MouseEventHandler<HTMLButtonElement>`	-
`onDoubleClick?`	`MouseEventHandler<HTMLButtonElement>`	-
`onDoubleClickCapture?`	`MouseEventHandler<HTMLButtonElement>`	-
`onDrag?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragCapture?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragEnd?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragEndCapture?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragEnter?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragEnterCapture?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragExit?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragExitCapture?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragLeave?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragLeaveCapture?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragOver?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragOverCapture?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragStart?`	`DragEventHandler<HTMLButtonElement>`	-
`onDragStartCapture?`	`DragEventHandler<HTMLButtonElement>`	-
`onDrop?`	`DragEventHandler<HTMLButtonElement>`	-
`onDropCapture?`	`DragEventHandler<HTMLButtonElement>`	-
`onMouseDown?`	`MouseEventHandler<HTMLButtonElement>`	-
`onMouseDownCapture?`	`MouseEventHandler<HTMLButtonElement>`	-
`onMouseEnter?`	`MouseEventHandler<HTMLButtonElement>`	-
`onMouseLeave?`	`MouseEventHandler<HTMLButtonElement>`	-
`onMouseMove?`	`MouseEventHandler<HTMLButtonElement>`	-
`onMouseMoveCapture?`	`MouseEventHandler<HTMLButtonElement>`	-
`onMouseOut?`	`MouseEventHandler<HTMLButtonElement>`	-
`onMouseOutCapture?`	`MouseEventHandler<HTMLButtonElement>`	-
`onMouseOver?`	`MouseEventHandler<HTMLButtonElement>`	-
`onMouseOverCapture?`	`MouseEventHandler<HTMLButtonElement>`	-
`onMouseUp?`	`MouseEventHandler<HTMLButtonElement>`	-
`onMouseUpCapture?`	`MouseEventHandler<HTMLButtonElement>`	-
`onSelect?`	`ReactEventHandler<HTMLButtonElement>`	-
`onSelectCapture?`	`ReactEventHandler<HTMLButtonElement>`	-
`onTouchCancel?`	`TouchEventHandler<HTMLButtonElement>`	-
`onTouchCancelCapture?`	`TouchEventHandler<HTMLButtonElement>`	-
`onTouchEnd?`	`TouchEventHandler<HTMLButtonElement>`	-
`onTouchEndCapture?`	`TouchEventHandler<HTMLButtonElement>`	-
`onTouchMove?`	`TouchEventHandler<HTMLButtonElement>`	-
`onTouchMoveCapture?`	`TouchEventHandler<HTMLButtonElement>`	-
`onTouchStart?`	`TouchEventHandler<HTMLButtonElement>`	-
`onTouchStartCapture?`	`TouchEventHandler<HTMLButtonElement>`	-
`onPointerDown?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerDownCapture?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerMove?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerMoveCapture?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerUp?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerUpCapture?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerCancel?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerCancelCapture?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerEnter?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerLeave?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerOver?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerOverCapture?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerOut?`	`PointerEventHandler<HTMLButtonElement>`	-
`onPointerOutCapture?`	`PointerEventHandler<HTMLButtonElement>`	-
`onGotPointerCapture?`	`PointerEventHandler<HTMLButtonElement>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<HTMLButtonElement>`	-
`onLostPointerCapture?`	`PointerEventHandler<HTMLButtonElement>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<HTMLButtonElement>`	-
`onScroll?`	`UIEventHandler<HTMLButtonElement>`	-
`onScrollCapture?`	`UIEventHandler<HTMLButtonElement>`	-
`onWheel?`	`WheelEventHandler<HTMLButtonElement>`	-
`onWheelCapture?`	`WheelEventHandler<HTMLButtonElement>`	-
`onAnimationStart?`	`AnimationEventHandler<HTMLButtonElement>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<HTMLButtonElement>`	-
`onAnimationEnd?`	`AnimationEventHandler<HTMLButtonElement>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<HTMLButtonElement>`	-
`onAnimationIteration?`	`AnimationEventHandler<HTMLButtonElement>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<HTMLButtonElement>`	-
`onToggle?`	`ToggleEventHandler<HTMLButtonElement>`	-
`onBeforeToggle?`	`ToggleEventHandler<HTMLButtonElement>`	-
`onTransitionCancel?`	`TransitionEventHandler<HTMLButtonElement>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<HTMLButtonElement>`	-
`onTransitionEnd?`	`TransitionEventHandler<HTMLButtonElement>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<HTMLButtonElement>`	-
`onTransitionRun?`	`TransitionEventHandler<HTMLButtonElement>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<HTMLButtonElement>`	-
`onTransitionStart?`	`TransitionEventHandler<HTMLButtonElement>`	-
`onTransitionStartCapture?`	`TransitionEventHandler<HTMLButtonElement>`	-
`asChild?`	`boolean`	-
`ref?`	`((instance: HTMLButtonElement \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<HTMLButtonElement \| null>`	-

ColorPickerFormat

The ColorPickerFormat component is used to display the format of the selected color.

Prop	Type	Default
`defaultChecked?`	`boolean`	-
`defaultValue?`	`string \| number \| readonly string[]`	-
`suppressContentEditableWarning?`	`boolean`	-
`suppressHydrationWarning?`	`boolean`	-
`accessKey?`	`string`	-
`autoCapitalize?`	`"off" \| "none" \| "on" \| "sentences" \| "words" \| "characters" \| (string & {})`	-
`autoFocus?`	`boolean`	-
`className?`	`string`	-
`contentEditable?`	`Booleanish \| "inherit" \| "plaintext-only"`	-
`contextMenu?`	`string`	-
`dir?`	`string`	-
`draggable?`	`Booleanish`	-
`enterKeyHint?`	`"enter" \| "done" \| "go" \| "next" \| "previous" \| "search" \| "send"`	-
`hidden?`	`boolean`	-
`id?`	`string`	-
`lang?`	`string`	-
`nonce?`	`string`	-
`slot?`	`string`	-
`spellCheck?`	`Booleanish`	-
`style?`	`CSSProperties`	-
`tabIndex?`	`number`	-
`title?`	`string`	-
`translate?`	`"yes" \| "no"`	-
`radioGroup?`	`string`	-
`role?`	`AriaRole`	-
`about?`	`string`	-
`content?`	`string`	-
`datatype?`	`string`	-
`inlist?`	`any`	-
`prefix?`	`string`	-
`property?`	`string`	-
`rel?`	`string`	-
`resource?`	`string`	-
`rev?`	`string`	-
`typeof?`	`string`	-
`vocab?`	`string`	-
`autoCorrect?`	`string`	-
`autoSave?`	`string`	-
`color?`	`string`	-
`itemProp?`	`string`	-
`itemScope?`	`boolean`	-
`itemType?`	`string`	-
`itemID?`	`string`	-
`itemRef?`	`string`	-
`results?`	`number`	-
`security?`	`string`	-
`unselectable?`	`"off" \| "on"`	-
`popover?`	`"" \| "auto" \| "manual"`	-
`popoverTargetAction?`	`"toggle" \| "show" \| "hide"`	-
`popoverTarget?`	`string`	-
`inert?`	`boolean`	-
`inputMode?`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-
`is?`	`string`	-
`aria-activedescendant?`	`string`	-
`aria-atomic?`	`Booleanish`	-
`aria-autocomplete?`	`"none" \| "list" \| "inline" \| "both"`	-
`aria-braillelabel?`	`string`	-
`aria-brailleroledescription?`	`string`	-
`aria-busy?`	`Booleanish`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-colcount?`	`number`	-
`aria-colindex?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colspan?`	`number`	-
`aria-controls?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-describedby?`	`string`	-
`aria-description?`	`string`	-
`aria-details?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-dropeffect?`	`"none" \| "link" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-errormessage?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-flowto?`	`string`	-
`aria-grabbed?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree"`	-
`aria-hidden?`	`Booleanish`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-keyshortcuts?`	`string`	-
`aria-label?`	`string`	-
`aria-labelledby?`	`string`	-
`aria-level?`	`number`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-modal?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-owns?`	`string`	-
`aria-placeholder?`	`string`	-
`aria-posinset?`	`number`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-readonly?`	`Booleanish`	-
`aria-relevant?`	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals"`	-
`aria-required?`	`Booleanish`	-
`aria-roledescription?`	`string`	-
`aria-rowcount?`	`number`	-
`aria-rowindex?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowspan?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-setsize?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-valuemax?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuenow?`	`number`	-
`aria-valuetext?`	`string`	-
`children?`	`ReactNode`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`onCopy?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCopyCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCut?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCutCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onPaste?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onPasteCapture?`	`ClipboardEventHandler<HTMLDivElement>`	-
`onCompositionEnd?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionStart?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionUpdate?`	`CompositionEventHandler<HTMLDivElement>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<HTMLDivElement>`	-
`onFocus?`	`FocusEventHandler<HTMLDivElement>`	-
`onFocusCapture?`	`FocusEventHandler<HTMLDivElement>`	-
`onBlur?`	`FocusEventHandler<HTMLDivElement>`	-
`onBlurCapture?`	`FocusEventHandler<HTMLDivElement>`	-
`onChange?`	`FormEventHandler<HTMLDivElement>`	-
`onChangeCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onBeforeInput?`	`FormEventHandler<HTMLDivElement>`	-
`onBeforeInputCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onInput?`	`FormEventHandler<HTMLDivElement>`	-
`onInputCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onReset?`	`FormEventHandler<HTMLDivElement>`	-
`onResetCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onSubmit?`	`FormEventHandler<HTMLDivElement>`	-
`onSubmitCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onInvalid?`	`FormEventHandler<HTMLDivElement>`	-
`onInvalidCapture?`	`FormEventHandler<HTMLDivElement>`	-
`onLoad?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onError?`	`ReactEventHandler<HTMLDivElement>`	-
`onErrorCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onKeyDown?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyPress?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyUp?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<HTMLDivElement>`	-
`onAbort?`	`ReactEventHandler<HTMLDivElement>`	-
`onAbortCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlay?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayThrough?`	`ReactEventHandler<HTMLDivElement>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onDurationChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onDurationChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEmptied?`	`ReactEventHandler<HTMLDivElement>`	-
`onEmptiedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEncrypted?`	`ReactEventHandler<HTMLDivElement>`	-
`onEncryptedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onEnded?`	`ReactEventHandler<HTMLDivElement>`	-
`onEndedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedData?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedDataCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedMetadata?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadStart?`	`ReactEventHandler<HTMLDivElement>`	-
`onLoadStartCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPause?`	`ReactEventHandler<HTMLDivElement>`	-
`onPauseCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlay?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlayCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlaying?`	`ReactEventHandler<HTMLDivElement>`	-
`onPlayingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onProgress?`	`ReactEventHandler<HTMLDivElement>`	-
`onProgressCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onRateChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onRateChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onResize?`	`ReactEventHandler<HTMLDivElement>`	-
`onResizeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeeked?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeekedCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeeking?`	`ReactEventHandler<HTMLDivElement>`	-
`onSeekingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onStalled?`	`ReactEventHandler<HTMLDivElement>`	-
`onStalledCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onSuspend?`	`ReactEventHandler<HTMLDivElement>`	-
`onSuspendCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onTimeUpdate?`	`ReactEventHandler<HTMLDivElement>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onVolumeChange?`	`ReactEventHandler<HTMLDivElement>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onWaiting?`	`ReactEventHandler<HTMLDivElement>`	-
`onWaitingCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onAuxClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenu?`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenuCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClick?`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClickCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onDrag?`	`DragEventHandler<HTMLDivElement>`	-
`onDragCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnd?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEndCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnter?`	`DragEventHandler<HTMLDivElement>`	-
`onDragEnterCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragExit?`	`DragEventHandler<HTMLDivElement>`	-
`onDragExitCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragLeave?`	`DragEventHandler<HTMLDivElement>`	-
`onDragLeaveCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragOver?`	`DragEventHandler<HTMLDivElement>`	-
`onDragOverCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDragStart?`	`DragEventHandler<HTMLDivElement>`	-
`onDragStartCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onDrop?`	`DragEventHandler<HTMLDivElement>`	-
`onDropCapture?`	`DragEventHandler<HTMLDivElement>`	-
`onMouseDown?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDownCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseEnter?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseLeave?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMove?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMoveCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOut?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOutCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOver?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOverCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUp?`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUpCapture?`	`MouseEventHandler<HTMLDivElement>`	-
`onSelect?`	`ReactEventHandler<HTMLDivElement>`	-
`onSelectCapture?`	`ReactEventHandler<HTMLDivElement>`	-
`onTouchCancel?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchCancelCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEnd?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEndCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMove?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMoveCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStart?`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStartCapture?`	`TouchEventHandler<HTMLDivElement>`	-
`onPointerDown?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerDownCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMove?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMoveCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUp?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUpCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancel?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancelCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerEnter?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerLeave?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOver?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOverCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOut?`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOutCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<HTMLDivElement>`	-
`onScroll?`	`UIEventHandler<HTMLDivElement>`	-
`onScrollCapture?`	`UIEventHandler<HTMLDivElement>`	-
`onWheel?`	`WheelEventHandler<HTMLDivElement>`	-
`onWheelCapture?`	`WheelEventHandler<HTMLDivElement>`	-
`onAnimationStart?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEnd?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIteration?`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<HTMLDivElement>`	-
`onToggle?`	`ToggleEventHandler<HTMLDivElement>`	-
`onBeforeToggle?`	`ToggleEventHandler<HTMLDivElement>`	-
`onTransitionCancel?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEnd?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRun?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStart?`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStartCapture?`	`TransitionEventHandler<HTMLDivElement>`	-

Color Picker

On this page