Directory

← Back

ColorPicker

ColorPicker for Vaadin 23.3+

Author

Rating

Popularity

1000+

This is a simple ColorPicker for Vaadin 23.3+. The component has basic native color input part and additional field to input color value as text. It supports common CSS color definitions as input. You can also define a set of your own preset colors, which are populated in the dropdown.

Check also the GitHub repository for the code, it has complete set of unit and integration tests. This component serves as a demonstrator for a robust add-on component creation. You can read more about tips in my blog post.

https://vaadin.com/blog/custom-component-unit-and-integration-testing-tips

Sample code

        ColorPicker colorPicker = new ColorPicker();
        colorPicker.setLabel("Color");
        colorPicker
                .setPresets(Arrays.asList(new ColorPreset("#00ff00", "Color 1"),
                        new ColorPreset("#ff0000", "Color 2")));

        colorPicker.addValueChangeListener(event -> {
            Notification.show(event.getValue());
        });

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Version 1.4.1

  • Fix issue with ComboBox filtering
Released
2023-12-15
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 23
Vaadin 24
Vaadin 23+ in 1.3.2
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

ColorPicker - Vaadin Add-on Directory

ColorPicker for Vaadin 23.3+ ColorPicker - Vaadin Add-on Directory
This is a simple ColorPicker for Vaadin 23.3+. The component has basic native color input part and additional field to input color value as text. It supports common CSS color definitions as input. You can also define a set of your own preset colors, which are populated in the dropdown. Check also the GitHub repository for the code, it has complete set of unit and integration tests. This component serves as a demonstrator for a robust add-on component creation. You can read more about tips in my blog post. https://vaadin.com/blog/custom-component-unit-and-integration-testing-tips
Online