InputColor
InputColor is a composable color picker component.
InputColor is a composable color picker with area, slider, swatch, and input sub-components.
Usage #
Examples #
Basic #
InputColor is a composable color picker with area, slider, swatch, and input sub-components.
With Popover #
InputColor can be used inside a Popover, with a color swatch as the trigger.
Vertical Slider #
Sliders support vertical orientation, displayed alongside the color area.
Controlled #
Demonstrates tracking color value changes during interaction and when interaction ends.
Advanced #
Advanced color picker with per-format channel sliders, input groups for RGBA, HSBA, HSLA, OKLCH channels, and a CSS output.
Forms #
Template Driven #
Reactive Forms #
InputColor can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
Color Manager #
Color Class #
The colorManager module provides utilities for programmatic color manipulation. It exports the Color class and helper functions for working with colors outside of the InputColor component.
The Color class is the base class for all color classes. It provides the basic functionality for all color classes.
- clone(): Clones the color.
- toString(format): Converts the color to a string.
- toFormat(format): Converts the color to a specific format.
- toJSON(): Converts the color to a JSON object.
- getChannelRange(channel): Returns the range of the channel.
- getFormat(): Returns the format of the color.
- getChannels(): Returns the channels of the color.
- getChannelValue(channel): Returns the value of the channel.
- getSpaceAxes(xyChannels): Returns the axes of the color.
- incChannelValue(channel, step): Increments the value of the channel by the step.
- decChannelValue(channel, step): Decrements the value of the channel by the step.
- setChannelValue(channel, value): Returns a new color with the value of the channel changed.
Accessibility #
InputColorArea
Screen Reader Support
aria-label is used to describe the component. aria-roledescription is used to describe the role of the component. aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext are used to describe the value of the component.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the area thumb. |
| right arrow | Moves the area thumb to the right. |
| left arrow | Moves the area thumb to the left. |
| up arrow | Moves the area thumb to the up. |
| down arrow | Moves the area thumb to the down. |
InputColorSlider
Screen Reader Support
aria-label is used to describe the component. aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext are used to describe the value of the component.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the slider thumb. |
| up arrow || left arrow | Decrements the slider thumb. |
| down arrow || right arrow | Increments the slider thumb. |
