## ColorInput Capture color inputs from user. Category: Inputs ### Simple Example ```python import dash_mantine_components as dmc from dash import Output, Input, html, callback component = html.Div( [ dmc.ColorInput(id="color-input", label="Your favorite color", w=250), dmc.Space(h=10), dmc.Text(id="selected-color-input"), ] ) @callback(Output("selected-color-input", "children"), Input("color-input", "value")) def pick(color): return f"You selected: {color}" ``` ### Formats Component supports hex, hexa, rgb, rgba, hsl and hsla color formats. Slider to change opacity is displayed only for hexa, rgba and hsla formats. ### Disable free input To disable free input set disallowInput prop. ```python import dash_mantine_components as dmc component = dmc.ColorInput( disallowInput=True, label="Your favorite color", value="#e05e5e", w=250 ) ``` ### With swatches With swatches You can add any amount of predefined color swatches. By default, there will be 10 swatches per row, you can change this with `swatchesPerRow` prop, like in ColorPicker component. ```python import dash_mantine_components as dmc component = dmc.ColorInput( label="Your favorite color", value="#e05e5e", w=250, format="hex", swatches=[ "#25262b", "#868e96", "#fa5252", "#e64980", "#be4bdb", "#7950f2", "#4c6ef5", "#228be6", "#15aabf", "#12b886", "#40c057", "#82c91e", "#fab005", "#fd7e14", ], ) ``` If you need to restrict color picking to certain colors – disable color picker and disallow free input: ```python import dash_mantine_components as dmc colors = dmc.DEFAULT_THEME["colors"] component = dmc.ColorInput( label="Your favorite color", value="#40c057", disallowInput=True, w=250, withPicker=False, swatches=colors["red"] + colors["green"], ) ``` ### Remove or replace preview By default, color preview will be rendered on the left side of the input, you can remove it using `withPreview=False` or replace with an icon. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Stack( [ dmc.ColorInput( label="Without preview", withPreview=False, value="#40c057", w=250, ), dmc.ColorInput( label="With icon", leftSection=DashIconify(icon="cil:paint"), withPreview=False, w=250, value="#40c057", ), ] ) ``` ### Eye dropper Set `withEyeDropper` prop to display eye dropper icon in the right section. This feature depends on `EyeDropper` API, the eye dropper will not be rendered if the API is not supported. ```python import dash_mantine_components as dmc component = dmc.ColorInput( withEyeDropper=True, label="Pick any color from the page", w=250 ) ``` ### Input props ### Accessibility #### Color picker focus Color picker is not focusable, users without mouse access can select color only by entering it into input manually. If you want to make component accessible do not disable free input. #### aria-label Provide `aria-labe`l in case you use component without label for screen reader support: ```python import dash_mantine_components as dmc dmc.ColorInput(value="#ffffff") # not ok, input is not labeled dmc.ColorInput(label="Pick color") # ok, input and label is connected dmc.ColorInput(**{"aria-label": "My input"}) # ok, label is not visible but will be announced by screen readers ``` ### StylesAPI This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. | Name | Static selector | Description | |:------------------|:--------------------------------------|:--------------------------------------------------------------------| | wrapper | .mantine-ColorInput-wrapper | Root element | | input | .mantine-ColorInput-input | Input element | | section | .mantine-ColorInput-section | Left and right sections | | root | .mantine-ColorInput-root | Root element | | label | .mantine-ColorInput-label | Label element | | required | .mantine-ColorInput-required | Required asterisk element, rendered inside label | | description | .mantine-ColorInput-description | Description element | | error | .mantine-ColorInput-error | Error element | | preview | .mantine-ColorInput-preview | Color preview, displayed only when `format` supports alpha channel | | body | .mantine-ColorInput-body | Contains alpha/hue sliders and color preview | | slider | .mantine-ColorInput-slider | Alpha and hue sliders root | | sliderOverlay | .mantine-ColorInput-sliderOverlay | Element used to display various overlays over hue and alpha sliders | | saturation | .mantine-ColorInput-saturation | Saturation picker | | saturationOverlay | .mantine-ColorInput-saturationOverlay | Element used to display various overlays over saturation picker | | sliders | .mantine-ColorInput-sliders | Contains alpha and hue sliders | | thumb | .mantine-ColorInput-thumb | Thumb of all sliders | | swatch | .mantine-ColorInput-swatch | Color swatch | | swatches | .mantine-ColorInput-swatches | Color swatches list | | dropdown | .mantine-ColorInput-dropdown | Popover dropdown | | colorPreview | .mantine-ColorInput-colorPreview | Color swatch preview in input left section | | eyeDropperButton | .mantine-ColorInput-eyeDropperButton | Eye dropper button | | eyeDropperIcon | .mantine-ColorInput-eyeDropperIcon | Default eye dropper icon | ### Keyword Arguments #### ColorInput - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - closeOnColorSwatchClick (boolean; optional): Determines whether the dropdown should be closed when one of the color swatches is clicked, `False` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - description (a list of or a singular dash component, string or number; optional): Contents of `Input.Description` component. If not set, description is not rendered. - descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Description` component. - disabled (boolean; optional): Sets `disabled` attribute on the `input` element. - disallowInput (boolean; optional): If input is not allowed, the user can only pick value with color picker and swatches, `False` by default. - error (a list of or a singular dash component, string or number; optional): Contents of `Input.Error` component. If not set, error is not rendered. - errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Error` component. - eyeDropperButtonProps (dict; optional): Props passed down to the eye dropper button. `eyeDropperButtonProps` is a dict with keys: - eyeDropperIcon (a list of or a singular dash component, string or number; optional): An icon to replace the default eye dropper icon. - fixOnBlur (boolean; optional): Determines whether the input value should be reset to the last known valid value when the input loses focus, `True` by default. - format (a value equal to: 'hex', 'hexa', 'rgba', 'rgb', 'hsl', 'hsla'; optional): Color format, `'hex'` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - inputProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input` component. - inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional): Controls order of the elements, `['label', 'description', 'input', 'error']` by default. - label (a list of or a singular dash component, string or number; optional): Contents of `Input.Label` component. If not set, label is not rendered. - labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the `Input.Label` component. - leftSection (a list of or a singular dash component, string or number; optional): Content section rendered on the left side of the input. - leftSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional): Sets `pointer-events` styles on the `leftSection` element, `'none'` by default. - leftSectionProps (dict; optional): Props passed down to the `leftSection` element. - leftSectionWidth (string | number; optional): Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - name (string; optional): Name prop. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - placeholder (string; optional): Placeholder. - pointer (boolean; optional): Determines whether the input should have `cursor: pointer` style, `False` by default. - popoverProps (dict; optional): Props passed down to the `Popover` component. `popoverProps` is a dict with keys: - radius (number; optional): Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default. - readOnly (boolean; optional): Readonly. - required (boolean; optional): Adds required attribute to the input and a red asterisk on the right side of label, `False` by default. - rightSection (a list of or a singular dash component, string or number; optional): Content section rendered on the right side of the input. - rightSectionPointerEvents (a value equal to: '-moz-initial', 'inherit', 'initial', 'revert', 'revert-layer', 'unset', 'auto', 'none', 'all', 'fill', 'painted', 'stroke', 'visible', 'visibleFill', 'visiblePainted', 'visibleStroke'; optional): Sets `pointer-events` styles on the `rightSection` element, `'none'` by default. - rightSectionProps (dict; optional): Props passed down to the `rightSection` element. - rightSectionWidth (string | number; optional): Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height. - size (optional): Controls input `height` and horizontal `padding`, `'sm'` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - swatches (list of strings; optional): An array of colors in one of the supported formats. Used to render swatches list below the color picker. - swatchesPerRow (number; optional): Number of swatches per row, `7` by default. - tabIndex (number; optional): tab-index. - value (string; optional): Controlled component value. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withAsterisk (boolean; optional): Determines whether the required asterisk should be displayed. Overrides `required` prop. Does not add required attribute to the input. `False` by default. - withErrorStyles (boolean; optional): Determines whether the input should have red border and red text color when the `error` prop is set, `True` by default. - withEyeDropper (boolean; optional): Determines whether eye dropper button should be displayed in the right section, `True` by default. - withPicker (boolean; optional): Determines whether the color picker should be displayed, `True` by default. - withPreview (boolean; optional): Determines whether the preview color swatch should be displayed in the left section of the input, `True` by default. - wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Props passed down to the root element.