Skip to main content

ColorPicker

The ColorPicker control allows you to select an optional color from the сolor board and get its HEX color code value. You can specify the selected color and supply the control's input with a placeholder, a tooltip or a label.

ColorPicker

Initialization​

To add a ColorPicker instance into your application, you need to complete two steps:

  • import the source file of the control on a page:
App.tsx
import { ColorPicker } from "@svar-ui/react-core";
  • render the <ColorPicker /> component to initialize a color picker:
App.tsx
export default function App() {
  return <ColorPicker />;
}

A default color picker is initialized without any color selected.

Setting the value​

The value of ColorPicker is the Hexadecimal code of a color selected in the control. It is displayed in the input of the control, when selection is done. You can specify the selected color as a string via the value property.

<ColorPicker value="#00a037" />

Related sample: ColorPicker

Getting the current value​

You can get the current value of the ColorPicker control. For this, you need to:

  • declare a state variable that will contain the control's value (it may contain the initial value):
import { useState } from "react";
import { ColorPicker } from "@svar-ui/react-core";

export default function App() {
  const [color, setColor] = useState<string | undefined>(undefined);

  return (
    <ColorPicker
      value={color}
      onChange={(v) => setColor(v.value)}
    />
  );
}

After that the value assigned to the state will be updated on each change of the color.

Related sample: ColorPicker

Adding the Clear button​

The Clear button allows clearing the selected option from the input.

Clear button

To add the Clear button into the Color Picker input, use the clear property:

<ColorPicker colors={['#65D3B3', '#FFC975', '#58C3FE']} clear />

Related sample: ColorPicker

Adding a title​

A title is a tooltip text that appears on hovering the mouse cursor over the input and may contain some extra information about the control. Use the title property to add a tooltip for a colorpicker:

import { useState } from "react";
import { ColorPicker } from "@svar-ui/react-core";

export default function App() {
  const [color, setColor] = useState<string | undefined>(undefined);
  const id = "color-picker-1";

  return (
    <ColorPicker
      value={color}
      onChange={(v) => setColor(v.value)}
      id={id}
      title="Colors can be reconfigured"
    />
  );
}

ColorPicker title

Related sample: ColorPicker

Adding a placeholder for the input​

You can add a placeholder inside a color picker's input. The placeholder can contain some prompting message to make interaction with the control simpler. All you need is to set your message as a value of the placeholder property:

<ColorPicker placeholder="Select a color" />

ColorPicker input placeholder

note

For a placeholder to be visible in the input, a color picker should be initialized without the initial value specified.

Related sample: ColorPicker

Setting the disabled state​

Whenever you need to render a disabled color picker, you can do it with the help of the disabled property set to true.

<ColorPicker disabled={true} />

Disabled color picker

It is also possible to set the disabled state for a color picker by declaring the property with no value:

<ColorPicker disabled />

Related sample: ColorPicker

Adding a label​

A default color picker has no label. To add it, you can use the Field component and complete several steps:

  • include the Field source file on a page, declare the <Field> component and complete it with the necessary props:
    • add a desired label via the label property
    • optionally, set the position:"left" property, if you want to place the label to the left of the color picker
    • the Field component provides an id to its render children via a function-as-children pattern - pass that id to the ColorPicker via the id prop
import { ColorPicker, Field } from "@svar-ui/react-core";

export default function App() {
  return (
    <Field label="Select a color" position="left">
      {({ id }) => <ColorPicker id={id} />}
    </Field>
  );
}

After that, render the color picker inside the <Field> and accept the id provided by Field's children function:

<Field label="Select a color" position="left">
  {({ id }) => <ColorPicker id={id} />}
</Field>

ColorPicker

Related sample: ColorPicker

Styling a color validation error​

When you use a color picker inside a form and a wrong color value is passed to the control, you can use error styling to show that validation has failed. Once you've set the error property to true (or just specified the property without a value):

<ColorPicker error={true} />

The input's border and the color's value become red. To make the label red as well, use the error property of the Field control:

import { ColorPicker, Field } from "@svar-ui/react-core";

export default function App() {
  return (
    <Field label="Value" error="error message">
      {({ id }) => <ColorPicker error={true} id={id} />}
    </Field>
  );
}

Error styling

Related sample: ColorPicker