Color Input Showcase
Example
Lightness
-
Chroma
-
Hue
-
Opacity
-
Dark Theme Invert
null
Example 2
Lightness
-
Chroma
-
Hue
-
Opacity
-
Dark Theme Invert
null
Component Documentation
Component Name
ColorInput
Builder Function Name
create_color_input_manager
Description
provides a UI to select or edit an oklch-based color with optional opacity, chroma, and hue controls
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| val | object | initial color data with shape { l, c, h, o, is_dark_theme_invert } or null | |
| label | string | optional label displayed above the color input | |
| is_show_opacity | boolean | true | whether to show opacity picker controls |
| l_options | array | [0..24] | the range of valid 'l' (lightness) indices |
| c_options | array | [0..24] | the range of valid 'c' (chroma) indices |
| h_options | array | [0..24] | the range of valid 'h' (hue) indices |
| o_options | array | [0..24] | the range of valid 'o' (opacity) indices |
| on_change | function | callback invoked whenever color values are updated | |
| on_finish | function | callback invoked when the user finishes color selection |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | initializes internal state, sub-managers, and sets the initial value | config: object | void |
| set_val | updates the color object to the provided value or null | input: object | void |
| set_lightness | increments/decrements the 'l' value within the allowed range | l: number change: number is_ignore_on_change: boolean | void |
| set_chroma | increments/decrements the 'c' value within the allowed range | c: number change: number | void |
| set_hue | increments/decrements the 'h' value within the allowed range | h: number change: number is_ignore_on_change: boolean | void |
| set_opacity | increments/decrements the 'o' value within the allowed range | o: number change: number | void |
| set_lightness_and_hue | sets both lightness and hue simultaneously, optionally ignoring on_change callback | l_input: number h_input: number | void |
| set_is_dark_theme_invert | toggles is_dark_theme_invert boolean within the color object | input: boolean | void |
| finish | closes the popover and invokes on_finish with the current color object | No Params | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| id | string | unique id for this color input instance |
| val_base | object | the default color object used if none is provided |
| val | object | the current color value or null if unset |
| label | string | an optional text label for the control |
| css_val | string | the color as an oklch() string or 'transparent' if none |
| is_show_opacity | boolean | true if the opacity picker is visible |
| l_options | array | the valid range of lightness values |
| c_options | array | the valid range of chroma values |
| h_options | array | the valid range of hue values |
| o_options | array | the valid range of opacity values |
| popover_manager | object | popover manager controlling the color selection popover |
| is_dark_theme_invert_checkbox_manager | object | checkbox manager controlling the is_dark_theme_invert toggle |
| toggle_button_manager | object | button manager used to open the color picker popover |
| finish_button_manager | object | button manager to finish color selection |
| lightness_up_button_manager | object | button manager to increment lightness |
| lightness_down_button_manager | object | button manager to decrement lightness |
| chroma_up_button_manager | object | button manager to increment chroma |
| chroma_down_button_manager | object | button manager to decrement chroma |
| hue_up_button_manager | object | button manager to increment hue |
| hue_down_button_manager | object | button manager to decrement hue |
| opacity_up_button_manager | object | button manager to increment opacity |
| opacity_down_button_manager | object | button manager to decrement opacity |
| set_null_button_manager | object | button manager to set the color value to null |
