DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Color Box

The ColorBox allows users to enter a color or select it in the drop-down editor. When you create a ColorBox, specify its value property to set the initial color. Users can change the value after they pick a shade, or after they click the OK button. To specify the mode, use the applyValueMode property.

Backend API
import React, { useCallback, useState } from 'react'; import ColorBox, { ColorBoxTypes } from 'devextreme-react/color-box'; const defaultModeLabel = { 'aria-label': 'Default mode' }; const alphaChannelLabel = { 'aria-label': 'With alpha channel editing' }; const customButtonCaptionsLabel = { 'aria-label': 'Custom button captions' }; const readOnlyLabel = { 'aria-label': 'Read only' }; const disabledLabel = { 'aria-label': 'Disabled' }; const eventHandlingLabel = { 'aria-label': 'Event Handling' }; function App() { const [color, setColor] = useState('#f05b41'); const handleColorChange = useCallback(({ value }: ColorBoxTypes.ValueChangedEvent) => { setColor(value); }, []); return ( <div className="form"> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Default mode</div> <div className="dx-field-value"> <ColorBox defaultValue="#f05b41" inputAttr={defaultModeLabel} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">With alpha channel editing</div> <div className="dx-field-value"> <ColorBox defaultValue="#f05b41" editAlphaChannel inputAttr={alphaChannelLabel} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Custom button captions</div> <div className="dx-field-value"> <ColorBox defaultValue="#f05b41" applyButtonText="Apply" cancelButtonText="Decline" inputAttr={customButtonCaptionsLabel} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Read only</div> <div className="dx-field-value"> <ColorBox defaultValue="#f05b41" readOnly={true} inputAttr={readOnlyLabel} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Disabled</div> <div className="dx-field-value"> <ColorBox defaultValue="#f05b41" disabled={true} inputAttr={disabledLabel} /> </div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Event Handling</div> <div className="hero-block"> <div className="color-block" style={{ backgroundColor: color }} > <div className="superhero"></div> </div> <div className="hero-color-box"> <ColorBox value={color} applyValueMode="instantly" inputAttr={eventHandlingLabel} onValueChanged={handleColorChange} /> </div> </div> </div> </div> ); } export default App;
import React, { useCallback, useState } from 'react'; import ColorBox from 'devextreme-react/color-box'; const defaultModeLabel = { 'aria-label': 'Default mode' }; const alphaChannelLabel = { 'aria-label': 'With alpha channel editing' }; const customButtonCaptionsLabel = { 'aria-label': 'Custom button captions' }; const readOnlyLabel = { 'aria-label': 'Read only' }; const disabledLabel = { 'aria-label': 'Disabled' }; const eventHandlingLabel = { 'aria-label': 'Event Handling' }; function App() { const [color, setColor] = useState('#f05b41'); const handleColorChange = useCallback(({ value }) => { setColor(value); }, []); return ( <div className="form"> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Default mode</div> <div className="dx-field-value"> <ColorBox defaultValue="#f05b41" inputAttr={defaultModeLabel} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">With alpha channel editing</div> <div className="dx-field-value"> <ColorBox defaultValue="#f05b41" editAlphaChannel inputAttr={alphaChannelLabel} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Custom button captions</div> <div className="dx-field-value"> <ColorBox defaultValue="#f05b41" applyButtonText="Apply" cancelButtonText="Decline" inputAttr={customButtonCaptionsLabel} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Read only</div> <div className="dx-field-value"> <ColorBox defaultValue="#f05b41" readOnly={true} inputAttr={readOnlyLabel} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Disabled</div> <div className="dx-field-value"> <ColorBox defaultValue="#f05b41" disabled={true} inputAttr={disabledLabel} /> </div> </div> </div> <div className="dx-fieldset"> <div className="dx-fieldset-header">Event Handling</div> <div className="hero-block"> <div className="color-block" style={{ backgroundColor: color }} > <div className="superhero"></div> </div> <div className="hero-color-box"> <ColorBox value={color} applyValueMode="instantly" inputAttr={eventHandlingLabel} onValueChanged={handleColorChange} /> </div> </div> </div> </div> ); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render(<App />, document.getElementById('app'));
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.form { min-height: 690px; } .form .dx-field-value { text-align: right; } .dx-fieldset-header { padding: 10px 0; } .color-block { width: 360px; height: 254px; background-color: #f05b41; position: relative; } .hero-color-box { position: absolute; right: 0; left: 400px; top: 110px; } .color-block .superhero { position: absolute; height: 100%; width: 100%; } .hero-block { position: relative; } .superhero { background-image: url("../../../../images/hero_white.png"); } .dx-color-scheme-dark .superhero { background-image: url("../../../../images/hero_black.png"); } .dx-color-scheme-darkmoon .superhero { background-image: url("../../../../images/hero_darkmoon.png"); } .dx-color-scheme-darkviolet .superhero { background-image: url("../../../../images/hero_darkviolet.png"); } .dx-color-scheme-greenmist .superhero { background-image: url("../../../../images/hero_greenmist.png"); } .dx-color-scheme-contrast .superhero { background-image: url("../../../../images/hero_contrast.png"); } .dx-color-scheme-blue-dark .superhero, .dx-color-scheme-orange-dark .superhero, .dx-color-scheme-teal-dark .superhero, .dx-color-scheme-lime-dark .superhero, .dx-color-scheme-purple-dark .superhero { background-image: url("../../../../images/hero_material_dark.png"); }

You can hide the editor's drop-down button to allow users to only type in a color code. To do this, disable the showDropDownButton property. Users can also edit the transparency of the selected shade if the editAlphaChannel property is set to true.

Configure the ColorBox

Use the following properties to specify the component's interactivity:

  • readOnly
    Specifies whether the ColorBox is read-only.

  • disabled
    Specifies whether the ColorBox responds to user interaction.

You can specify the following properties to add custom buttons into the input field, or configure the drop-down editor's buttons:

  • buttons
    Allows you to add custom buttons to the input text field.

  • showClearButton
    Specifies whether to display the Clear button in the ColorBox.

  • applyButtonText
    Specifies the text for the button that applies changes and closes the drop-down editor.

  • cancelButtonText
    Specifies the text for the button that cancels changes and closes the drop-down editor.

Handle Value Change

Implement the onValueChanged function to handle the value change when users select a color in the drop-down editor. To handle the input value change, use the onInput function.