For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Sign in
DocsAPI ReferenceChangelog
DocsAPI ReferenceChangelog
  • Get started
    • Quickstart
    • Concepts
  • Guides
    • Environments
  • Reference
        • Checkbox
        • Code
        • Color
        • Combobox
        • Group
        • Image
        • Font
        • Link
        • List
        • Number
        • Rich Text
        • Select
        • Slot
        • Style
        • Text Area
        • Text Input
      • Makeswift API Handler
    • Product docs
    • Blog
    • Support
Sign in
LogoLogo
On this page
  • Params
  • Prop type
  • Example
  • Using inline styles
  • Using CSS variables
Reference@makeswift/runtimeControls

Color

Was this page helpful?
Previous

Code

Next

Combobox

Built with

Adds a Color picker panel in the Makeswift builder to visually edit a RGBA string prop.

Color panels on a Button component to edit the background and text colors

Params

label
stringDefaults to Text

Text for the panel label in the Makeswift builder.

description
string

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format. Added in v0.24.8.

labelOrientation
"vertical" | "horizontal"Defaults to horizontal

Position for the color label within the panel.

defaultValue
string

The value passed to your component when nothing is set in the Makeswift builder. Must be a valid CSS color string.

hideAlpha
boolean

Indicates whether to hide the alpha channel slider.

What is the alpha channel slider?

Prop type

The Color control passes a string RGBA value to your component. If you don’t set a defaultValue and no value is set in the builder, your component will receive undefined.

Example

The following examples adds two Color controls to the backgroundColor and color props of a Button component.

Using inline styles

1import { Color } from "@makeswift/runtime/controls";
2
3import { runtime } from "../../../../../makeswift/runtime";
4
5import { Button } from "./Button";
6
7runtime.registerComponent(Button, {
8  type: "button",
9  label: "Button",
10  props: {
11    backgroundColor: Color({
12      label: "Background color",
13      defaultValue: "black",
14    }),
15    color: Color({
16      label: "Text color",
17      defaultValue: "white",
18    }),
19  },
20});

Using CSS variables

1import { Color } from "@makeswift/runtime/controls";
2import { runtime } from "../../../../../lib/makeswift/runtime";
3
4import { Button } from "./Button";
5
6runtime.registerComponent(Button, {
7  type: "button",
8  label: "Button",
9  props: {
10    backgroundColor: Color({
11      label: "Background color",
12      defaultValue: "black",
13    }),
14    color: Color({
15      label: "Text color",
16      defaultValue: "white",
17    }),
18  },
19});

.makeswift.ts is a naming convention for organizing Makeswift registration code. Learn more.