MUIColorPicker

MUIColorPicker wraps react-color-palette with the suite's label/error/helper-text handling. The emitted value format (hex, rgb, hsv) is chosen with valueKey.

Installation#

Make sure to install react-color-palette package before using this component.

npmyarnpnpm

npm install react-color-palette

yarn add react-color-palette

pnpm add react-color-palette

Usage#

import MUIColorPicker from '@nish1896/mui-components/misc/color-picker';

The color picker accepts string values in hex, rgb, hsl, or text format, such as:

#00ffff
rgb(0 255 255)
hsl(180 100% 100% / 1)
cyan

If the field value is uninitialized, the default color black (#000000) is selected, which can be configured using the defaultColor prop. Refer to the colorToString function to convert an RGB or HSV color object into a string, which can be used to set the default color for the color picker.

const [color, setColor] = useState('#1976d2');

<MUIColorPicker
  fieldName="brandColor"
  value={color}
  onValueChange={({ color, colorValue }) => setColor(colorValue)}
/>

The color value returned from the onValueChange prop is an object containing the equivalent hex, rgb, and hsv values:

{
  hex: '#00ffff',
  hsv: {
    a: 1,
    h: 180,
    s: 100,
    v: 100
  },
  rgb: {
    a: 1,
    b: 255,
    g: 255,
    r: 0
  }
}

colorValue will be string in rgb or hsl format.

Props#

Props marked with * are required.

Name	Type	Description
`fieldName`*	`string`	Name/path of the field. Used to derive generated ids and the default label.
`value`	`string \| null`	Current color value. When empty, `defaultColor` is used as the initial picker state.
`onValueChange`*	`({ color, colorValue, setColor }) => void`	Called with the formatted color value and raw `IColor` object whenever the picker changes. Use `setColor` to update the internal picker state.
`valueKey`	`hex \| rgb \| hsv`	Color format emitted through `onValueChange`. `hex` emits the color hex string; other formats are converted to a CSS color string. Default: `'hex'`
`defaultColor`	`string`	Initial color used by the picker when `value` is empty. Default: `'#000000'`
`excludeAlpha`	`boolean`	When true, omits alpha from emitted color values.
`height`	`number`	Height, in pixels, of the color picker control. Default: `200`
`hideAlpha`	`boolean`	When true, hides alpha controls in the color picker.
`hideInput`	`(hex \| rgb \| hsv)[] \| boolean`	Hides picker input fields rendered by `react-color-palette`.
`required`	`boolean`	Indicates that the field is mandatory by adding an asterisk symbol (*) to the form label and setting the relevant accessibility attributes.
`label`	`ReactNode`	Label displayed for the field. Defaults to a human-readable label derived from `fieldName`, e.g. `firstName` becomes `First Name`
`showLabelAboveFormField`	`boolean`	Whether the field label renders above the control. This control has no built-in inline label, so it defaults to `true`; pass `false` to hide the visible label (the accessible name is still applied). Default: `true`
`hideLabel`	`boolean`	When true, hides the rendered field label while preserving accessible labeling where possible.
`formLabelProps`	FormLabelProps	FormLabelProps forwarded to the internal `FormLabel`. The `id` is managed by the component. Multiple fields can be configured using the `ConfigProvider` component.
`errorMessage`	`string \| string[]`	Validation error for the field — pass a single message `string`, or a `string[]` when the field can fail multiple rules at once (every message is shown together). A non-empty string or array puts the field in an error state; `undefined`/`''`/`[]` clear it. Normalize your form library's error shape to this at the call site (e.g. an RHF `FieldError` via its `.message`). Use `renderError` to customize how the message(s) are rendered.
`renderError`	`(errors: string[]) => ReactNode`	Custom renderer for the resolved error message(s), called only when the field is in an error state. Always receives a `string[]` — use `errors[0]` for the common single-message case, or map over `errors` when a field fails several rules. By default a single message renders as text and multiple messages render on separate lines.
`hideErrorMessage`	`boolean`	If true, hides the error message text while keeping the field in an error state.
`helperText`	`ReactNode`	Content displayed in the FormHelperText component below the field when there is no visible validation error.
`formHelperTextProps`	FormHelperTextProps	FormHelperTextProps forwarded to the internal `FormHelperText`. The `id` is managed by the component. Multiple fields can be configured using the `ConfigProvider` component.
`customIds`	`{ field, label, helperText, error }`	Overrides the default field, label, helper text, and error IDs used for accessibility.

Playground#

Driven by plain React state — valueKey (hex / rgb / hsv), defaultColor, excludeAlpha, a custom height, and using setColor to reject a value.

Date Time Picker

Rich Text Editor