API Reference > ui-components > Color > SaturationPickerProps SaturationPickerProps Interface Beta Properties for the SaturationPicker React component Extends HTMLAttributes<HTMLDivElement> CommonProps Properties Name Type Description hsv HSVColor HSV Color Value onSaturationChange (saturation: HSVColor) => void | undefined function to run when user selects location in saturation region Inherited properties Name Type Inherited from Description about undefined | string HTMLAttributes<HTMLDivElement> accessKey undefined | string HTMLAttributes<HTMLDivElement> aria-activedescendant undefined | string AriaAttributes Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. aria-atomic boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. aria-autocomplete "none" = undefined | "inline" = undefined | "list" = undefined | "both" = undefined AriaAttributes Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be aria-busy boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. aria-checked boolean | "false" = undefined | "mixed" = undefined | "true" = undefined AriaAttributes Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. aria-colcount undefined | number AriaAttributes Defines the total number of columns in a table, grid, or treegrid. aria-colindex undefined | number AriaAttributes Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. aria-colspan undefined | number AriaAttributes Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. aria-controls undefined | string AriaAttributes Identifies the element (or elements) whose contents or presence are controlled by the current element. aria-current boolean | "false" = undefined | "true" = undefined | "page" = undefined | "step" = undefined | "location" = undefined | "date" = undefined | "time" = undefined AriaAttributes Indicates the element that represents the current item within a container or set of related elements. aria-describedby undefined | string AriaAttributes Identifies the element (or elements) that describes the object. aria-details undefined | string AriaAttributes Identifies the element that provides a detailed, extended description for the object. aria-disabled boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. aria-dropeffect "none" = undefined | "copy" = undefined | "execute" = undefined | "link" = undefined | "move" = undefined | "popup" = undefined AriaAttributes Indicates what functions can be performed when a dragged object is released on the drop target. aria-errormessage undefined | string AriaAttributes Identifies the element that provides an error message for the object. aria-expanded boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. aria-flowto undefined | string AriaAttributes Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, aria-grabbed boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates an element's "grabbed" state in a drag-and-drop operation. aria-haspopup boolean | "false" = undefined | "true" = undefined | "menu" = undefined | "listbox" = undefined | "tree" = undefined | "grid" = undefined | "dialog" = undefined AriaAttributes Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. aria-hidden boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates whether the element is exposed to an accessibility API. aria-invalid boolean | "false" = undefined | "true" = undefined | "grammar" = undefined | "spelling" = undefined AriaAttributes Indicates the entered value does not conform to the format expected by the application. aria-keyshortcuts undefined | string AriaAttributes Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. aria-label undefined | string AriaAttributes Defines a string value that labels the current element. aria-labelledby undefined | string AriaAttributes Identifies the element (or elements) that labels the current element. aria-level undefined | number AriaAttributes Defines the hierarchical level of an element within a structure. aria-live "off" = undefined | "assertive" = undefined | "polite" = undefined AriaAttributes Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. aria-modal boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates whether an element is modal when displayed. aria-multiline boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates whether a text box accepts multiple lines of input or only a single line. aria-multiselectable boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates that the user may select more than one item from the current selectable descendants. aria-orientation "horizontal" = undefined | "vertical" = undefined AriaAttributes Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. aria-owns undefined | string AriaAttributes Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship aria-placeholder undefined | string AriaAttributes Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. aria-posinset undefined | number AriaAttributes Defines an element's number or position in the current set of listitems or treeitems. aria-pressed boolean | "false" = undefined | "mixed" = undefined | "true" = undefined AriaAttributes Indicates the current "pressed" state of toggle buttons. aria-readonly boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates that the element is not editable, but is otherwise operable. aria-relevant "additions" = undefined | "additions text" = undefined | "all" = undefined | "removals" = undefined | "text" = undefined AriaAttributes Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. aria-required boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates that user input is required on the element before a form may be submitted. aria-roledescription undefined | string AriaAttributes Defines a human-readable, author-localized description for the role of an element. aria-rowcount undefined | number AriaAttributes Defines the total number of rows in a table, grid, or treegrid. aria-rowindex undefined | number AriaAttributes Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. aria-rowspan undefined | number AriaAttributes Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. aria-selected boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates the current "selected" state of various widgets. aria-setsize undefined | number AriaAttributes Defines the number of items in the current set of listitems or treeitems. aria-sort "none" = undefined | "ascending" = undefined | "descending" = undefined | "other" = undefined AriaAttributes Indicates if items in a table or grid are sorted in ascending or descending order. aria-valuemax undefined | number AriaAttributes Defines the maximum allowed value for a range widget. aria-valuemin undefined | number AriaAttributes Defines the minimum allowed value for a range widget. aria-valuenow undefined | number AriaAttributes Defines the current value for a range widget. aria-valuetext undefined | string AriaAttributes Defines the human readable text alternative of aria-valuenow for a range widget. autoCapitalize undefined | string HTMLAttributes<HTMLDivElement> autoCorrect undefined | string HTMLAttributes<HTMLDivElement> autoSave undefined | string HTMLAttributes<HTMLDivElement> children undefined | ReactNode DOMAttributes className undefined | string HTMLAttributes<HTMLDivElement> color undefined | string HTMLAttributes<HTMLDivElement> contentEditable Booleanish | "inherit" = undefined HTMLAttributes<HTMLDivElement> contextMenu undefined | string HTMLAttributes<HTMLDivElement> dangerouslySetInnerHTML undefined | { __html: string } DOMAttributes datatype undefined | string HTMLAttributes<HTMLDivElement> defaultChecked undefined | false | true HTMLAttributes<HTMLDivElement> defaultValue string | number | string[] HTMLAttributes<HTMLDivElement> dir undefined | string HTMLAttributes<HTMLDivElement> draggable undefined | Booleanish HTMLAttributes<HTMLDivElement> hidden undefined | false | true HTMLAttributes<HTMLDivElement> id undefined | string HTMLAttributes<HTMLDivElement> inlist undefined | any HTMLAttributes<HTMLDivElement> inputMode "none" = undefined | "text" = undefined | "tel" = undefined | "url" = undefined | "email" = undefined | "numeric" = undefined | "decimal" = undefined | "search" = undefined HTMLAttributes<HTMLDivElement> Hints at the type of data that might be entered by the user while editing the element or its contents is undefined | string HTMLAttributes<HTMLDivElement> Specify that a standard HTML element should behave like a defined custom built-in element itemID undefined | string HTMLAttributes<HTMLDivElement> itemProp undefined | string HTMLAttributes<HTMLDivElement> itemRef undefined | string HTMLAttributes<HTMLDivElement> itemScope undefined | false | true HTMLAttributes<HTMLDivElement> itemType undefined | string HTMLAttributes<HTMLDivElement> lang undefined | string HTMLAttributes<HTMLDivElement> onAbort undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onAbortCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onAnimationEnd undefined | AnimationEventHandler<HTMLDivElement> DOMAttributes onAnimationEndCapture undefined | AnimationEventHandler<HTMLDivElement> DOMAttributes onAnimationIteration undefined | AnimationEventHandler<HTMLDivElement> DOMAttributes onAnimationIterationCapture undefined | AnimationEventHandler<HTMLDivElement> DOMAttributes onAnimationStart undefined | AnimationEventHandler<HTMLDivElement> DOMAttributes onAnimationStartCapture undefined | AnimationEventHandler<HTMLDivElement> DOMAttributes onAuxClick undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onAuxClickCapture undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onBeforeInput undefined | FormEventHandler<HTMLDivElement> DOMAttributes onBeforeInputCapture undefined | FormEventHandler<HTMLDivElement> DOMAttributes onBlur undefined | FocusEventHandler<HTMLDivElement> DOMAttributes onBlurCapture undefined | FocusEventHandler<HTMLDivElement> DOMAttributes onCanPlay undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onCanPlayCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onCanPlayThrough undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onCanPlayThroughCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onChange undefined | FormEventHandler<HTMLDivElement> DOMAttributes onChangeCapture undefined | FormEventHandler<HTMLDivElement> DOMAttributes onClick undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onClickCapture undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onCompositionEnd undefined | CompositionEventHandler<HTMLDivElement> DOMAttributes onCompositionEndCapture undefined | CompositionEventHandler<HTMLDivElement> DOMAttributes onCompositionStart undefined | CompositionEventHandler<HTMLDivElement> DOMAttributes onCompositionStartCapture undefined | CompositionEventHandler<HTMLDivElement> DOMAttributes onCompositionUpdate undefined | CompositionEventHandler<HTMLDivElement> DOMAttributes onCompositionUpdateCapture undefined | CompositionEventHandler<HTMLDivElement> DOMAttributes onContextMenu undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onContextMenuCapture undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onCopy undefined | ClipboardEventHandler<HTMLDivElement> DOMAttributes onCopyCapture undefined | ClipboardEventHandler<HTMLDivElement> DOMAttributes onCut undefined | ClipboardEventHandler<HTMLDivElement> DOMAttributes onCutCapture undefined | ClipboardEventHandler<HTMLDivElement> DOMAttributes onDoubleClick undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onDoubleClickCapture undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onDrag undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragCapture undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragEnd undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragEndCapture undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragEnter undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragEnterCapture undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragExit undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragExitCapture undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragLeave undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragLeaveCapture undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragOver undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragOverCapture undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragStart undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDragStartCapture undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDrop undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDropCapture undefined | DragEventHandler<HTMLDivElement> DOMAttributes onDurationChange undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onDurationChangeCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onEmptied undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onEmptiedCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onEncrypted undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onEncryptedCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onEnded undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onEndedCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onError undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onErrorCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onFocus undefined | FocusEventHandler<HTMLDivElement> DOMAttributes onFocusCapture undefined | FocusEventHandler<HTMLDivElement> DOMAttributes onGotPointerCapture undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onGotPointerCaptureCapture undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onInput undefined | FormEventHandler<HTMLDivElement> DOMAttributes onInputCapture undefined | FormEventHandler<HTMLDivElement> DOMAttributes onInvalid undefined | FormEventHandler<HTMLDivElement> DOMAttributes onInvalidCapture undefined | FormEventHandler<HTMLDivElement> DOMAttributes onKeyDown undefined | KeyboardEventHandler<HTMLDivElement> DOMAttributes onKeyDownCapture undefined | KeyboardEventHandler<HTMLDivElement> DOMAttributes onKeyPress undefined | KeyboardEventHandler<HTMLDivElement> DOMAttributes onKeyPressCapture undefined | KeyboardEventHandler<HTMLDivElement> DOMAttributes onKeyUp undefined | KeyboardEventHandler<HTMLDivElement> DOMAttributes onKeyUpCapture undefined | KeyboardEventHandler<HTMLDivElement> DOMAttributes onLoad undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onLoadCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onLoadStart undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onLoadStartCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onLoadedData undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onLoadedDataCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onLoadedMetadata undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onLoadedMetadataCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onLostPointerCapture undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onLostPointerCaptureCapture undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onMouseDown undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onMouseDownCapture undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onMouseEnter undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onMouseLeave undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onMouseMove undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onMouseMoveCapture undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onMouseOut undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onMouseOutCapture undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onMouseOver undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onMouseOverCapture undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onMouseUp undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onMouseUpCapture undefined | MouseEventHandler<HTMLDivElement> DOMAttributes onPaste undefined | ClipboardEventHandler<HTMLDivElement> DOMAttributes onPasteCapture undefined | ClipboardEventHandler<HTMLDivElement> DOMAttributes onPause undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onPauseCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onPlay undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onPlayCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onPlaying undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onPlayingCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onPointerCancel undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerCancelCapture undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerDown undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerDownCapture undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerEnter undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerEnterCapture undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerLeave undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerLeaveCapture undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerMove undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerMoveCapture undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerOut undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerOutCapture undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerOver undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerOverCapture undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerUp undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onPointerUpCapture undefined | PointerEventHandler<HTMLDivElement> DOMAttributes onProgress undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onProgressCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onRateChange undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onRateChangeCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onReset undefined | FormEventHandler<HTMLDivElement> DOMAttributes onResetCapture undefined | FormEventHandler<HTMLDivElement> DOMAttributes onScroll undefined | UIEventHandler<HTMLDivElement> DOMAttributes onScrollCapture undefined | UIEventHandler<HTMLDivElement> DOMAttributes onSeeked undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onSeekedCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onSeeking undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onSeekingCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onSelect undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onSelectCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onStalled undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onStalledCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onSubmit undefined | FormEventHandler<HTMLDivElement> DOMAttributes onSubmitCapture undefined | FormEventHandler<HTMLDivElement> DOMAttributes onSuspend undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onSuspendCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onTimeUpdate undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onTimeUpdateCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onTouchCancel undefined | TouchEventHandler<HTMLDivElement> DOMAttributes onTouchCancelCapture undefined | TouchEventHandler<HTMLDivElement> DOMAttributes onTouchEnd undefined | TouchEventHandler<HTMLDivElement> DOMAttributes onTouchEndCapture undefined | TouchEventHandler<HTMLDivElement> DOMAttributes onTouchMove undefined | TouchEventHandler<HTMLDivElement> DOMAttributes onTouchMoveCapture undefined | TouchEventHandler<HTMLDivElement> DOMAttributes onTouchStart undefined | TouchEventHandler<HTMLDivElement> DOMAttributes onTouchStartCapture undefined | TouchEventHandler<HTMLDivElement> DOMAttributes onTransitionEnd undefined | TransitionEventHandler<HTMLDivElement> DOMAttributes onTransitionEndCapture undefined | TransitionEventHandler<HTMLDivElement> DOMAttributes onVolumeChange undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onVolumeChangeCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onWaiting undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onWaitingCapture undefined | ReactEventHandler<HTMLDivElement> DOMAttributes onWheel undefined | WheelEventHandler<HTMLDivElement> DOMAttributes onWheelCapture undefined | WheelEventHandler<HTMLDivElement> DOMAttributes placeholder undefined | string HTMLAttributes<HTMLDivElement> prefix undefined | string HTMLAttributes<HTMLDivElement> property undefined | string HTMLAttributes<HTMLDivElement> radioGroup undefined | string HTMLAttributes<HTMLDivElement> resource undefined | string HTMLAttributes<HTMLDivElement> results undefined | number HTMLAttributes<HTMLDivElement> role undefined | string HTMLAttributes<HTMLDivElement> security undefined | string HTMLAttributes<HTMLDivElement> slot undefined | string HTMLAttributes<HTMLDivElement> spellCheck undefined | Booleanish HTMLAttributes<HTMLDivElement> style undefined | CSSProperties HTMLAttributes<HTMLDivElement> suppressContentEditableWarning undefined | false | true HTMLAttributes<HTMLDivElement> suppressHydrationWarning undefined | false | true HTMLAttributes<HTMLDivElement> tabIndex undefined | number HTMLAttributes<HTMLDivElement> title undefined | string HTMLAttributes<HTMLDivElement> translate "yes" = undefined | "no" = undefined HTMLAttributes<HTMLDivElement> typeof undefined | string HTMLAttributes<HTMLDivElement> unselectable "on" = undefined | "off" = undefined HTMLAttributes<HTMLDivElement> vocab undefined | string HTMLAttributes<HTMLDivElement> Defined in ui/components/src/ui-components/color/SaturationPicker.tsx Line 20 Last Updated: 13 June, 2024