Color

Render a color picker. Extends Base. The stored value is a CSS color string (e.g. "#0070f3").

Interactive Demo

Example

#0070f3

const config = {
  components: {
    Example: {
      fields: {
        background: {
          type: "color",
        },
      },
      render: ({ background }) => {
        return <div style={{ background }}>Hello, world</div>;
      },
    },
  },
};

Params

Param	Example	Type	Status
`type`	`type: "color"`	”color”	Required
`placeholder`	`placeholder: "#000000"`	String	-

Required params

`type`

The type of the field. Must be "color" for Color fields.

const config = {
  components: {
    Example: {
      fields: {
        background: {
          type: "color",
        },
      },
      // ...
    },
  },
};

Optional params

Placeholder

The placeholder text to display when the field is empty.

const config = {
  components: {
    Example: {
      fields: {
        background: {
          type: "color",
          placeholder: "#000000",
        },
      },
      // ...
    },
  },
};

Array Custom