Color Picker

Used to select colors from a color area or a set of defined swatches

Color

"use client"

import { HStack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot defaultValue={parseColor("#eb5e41")} maxW="200px">
      <ColorPickerLabel>Color</ColorPickerLabel>
      <ColorPickerControl>
        <ColorPickerInput />
        <ColorPickerTrigger />
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerArea />
        <HStack>
          <ColorPickerEyeDropper />
          <ColorPickerSliders />
        </HStack>
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

Setup

If you don't already have the snippet, run the following command to add the color-picker snippet

npx @chakra-ui/cli snippet add color-picker

The snippet includes a closed component composition for the ColorPicker component.

Usage

import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

<ColorPickerRoot>
  <ColorPickerLabel />
  <ColorPickerControl>
    <ColorPickerInput />
    <ColorPickerTrigger />
  </ColorPickerControl>
  <ColorPickerContent>
    <ColorPickerArea />
    <ColorPickerEyeDropper />
    <ColorPickerSliders />
  </ColorPickerContent>
</ColorPickerRoot>

Examples

Sizes

Use the size prop to change the size of the color picker.

Color (2xs)

Color (xs)

Color (sm)

Color (md)

Color (lg)

Color (xl)

Color (2xl)

"use client"

import { For, HStack, Stack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerSwatchGroup,
  ColorPickerSwatchTrigger,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <Stack gap="8" maxW="sm">
      <For each={["2xs", "xs", "sm", "md", "lg", "xl", "2xl"]}>
        {(size) => (
          <ColorPickerRoot
            key={size}
            defaultValue={parseColor("#eb5e41")}
            size={size}
          >
            <ColorPickerLabel>Color ({size})</ColorPickerLabel>
            <ColorPickerControl>
              <ColorPickerInput />
              <ColorPickerTrigger />
            </ColorPickerControl>
            <ColorPickerContent>
              <ColorPickerArea />
              <HStack>
                <ColorPickerEyeDropper />
                <ColorPickerSliders />
              </HStack>
              <ColorPickerSwatchGroup>
                {["red", "blue", "green"].map((item) => (
                  <ColorPickerSwatchTrigger
                    swatchSize="4.5"
                    key={item}
                    value={item}
                  />
                ))}
              </ColorPickerSwatchGroup>
            </ColorPickerContent>
          </ColorPickerRoot>
        )}
      </For>
    </Stack>
  )
}

Variants

Use the variant prop to change the visual style of the color picker. Values can be either outline or subtle.

Color (outline)

Color (subtle)

"use client"

import { For, HStack, Stack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <Stack gap="8">
      <For each={["outline", "subtle"]}>
        {(variant) => (
          <ColorPickerRoot
            defaultValue={parseColor("#eb5e41")}
            maxW="200px"
            variant={variant}
          >
            <ColorPickerLabel>Color ({variant})</ColorPickerLabel>
            <ColorPickerControl>
              <ColorPickerInput />
              <ColorPickerTrigger />
            </ColorPickerControl>
            <ColorPickerContent>
              <ColorPickerArea />
              <HStack>
                <ColorPickerEyeDropper />
                <ColorPickerSliders />
              </HStack>
            </ColorPickerContent>
          </ColorPickerRoot>
        )}
      </For>
    </Stack>
  )
}

Input Only

Combine the ColorPickerValueSwatch and the ColorPickerEyeDropper on the InputGroup to render a color picker that contains only an input.

Color

"use client"

import { parseColor } from "@chakra-ui/react"
import {
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerValueSwatch,
} from "@/components/ui/color-picker"
import { InputGroup } from "@/components/ui/input-group"

const Demo = () => {
  return (
    <ColorPickerRoot defaultValue={parseColor("#eb5e41")} maxW="200px">
      <ColorPickerLabel>Color</ColorPickerLabel>
      <ColorPickerControl>
        <InputGroup
          startOffset="0px"
          startElement={<ColorPickerValueSwatch boxSize="4.5" />}
          endElementProps={{ px: "1" }}
          endElement={<ColorPickerEyeDropper variant="ghost" />}
        >
          <ColorPickerInput />
        </InputGroup>
      </ColorPickerControl>
    </ColorPickerRoot>
  )
}

Swatch Only

Use the ColorPickerSwatchGroup and ColorPickerSwatchTrigger to render only the color swatches.

Color: rgba(0, 0, 0, 1)

import {
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSwatchGroup,
  ColorPickerSwatchTrigger,
  ColorPickerValueText,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot alignItems="flex-start">
      <ColorPickerLabel>
        Color: <ColorPickerValueText />
      </ColorPickerLabel>
      <ColorPickerSwatchGroup>
        {swatches.map((item) => (
          <ColorPickerSwatchTrigger key={item} value={item} />
        ))}
      </ColorPickerSwatchGroup>
    </ColorPickerRoot>
  )
}

const swatches = ["red", "green", "blue", "purple", "orange", "pink"]

Trigger Only

Compose the color picker to initially show only a trigger using the ColorPickerValueSwatch and ColorPickerValueText.

Color

"use client"

import { HStack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerTrigger,
  ColorPickerValueSwatch,
  ColorPickerValueText,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot defaultValue={parseColor("#eb5e41")} maxW="200px">
      <ColorPickerLabel>Color</ColorPickerLabel>
      <ColorPickerControl>
        <ColorPickerTrigger px="2">
          <ColorPickerValueSwatch boxSize="6" />
          <ColorPickerValueText minW="160px" />
        </ColorPickerTrigger>
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerArea />
        <HStack>
          <ColorPickerEyeDropper />
          <ColorPickerSliders />
          <ColorPickerValueSwatch />
        </HStack>
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

Trigger Inside Input

Compose the color picker to trigger in input using the InputGroup and ColorPickerInput.

Color

"use client"

import { HStack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerTrigger,
  ColorPickerValueSwatch,
  ColorPickerValueText,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot defaultValue={parseColor("#eb5e41")} maxW="200px">
      <ColorPickerLabel>Color</ColorPickerLabel>
      <ColorPickerControl>
        <ColorPickerTrigger px="2">
          <ColorPickerValueSwatch boxSize="6" />
          <ColorPickerValueText minW="160px" />
        </ColorPickerTrigger>
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerArea />
        <HStack>
          <ColorPickerEyeDropper />
          <ColorPickerSliders />
          <ColorPickerValueSwatch />
        </HStack>
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

Controlled

Use the value and onValueChange props to control the state of the color picker.

Color

"use client"

import { HStack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"
import { useState } from "react"

const Demo = () => {
  const [color, setColor] = useState(parseColor("#eb5e41"))

  return (
    <ColorPickerRoot
      value={color}
      format="hsla"
      onValueChange={(e) => setColor(e.value)}
      maxW="200px"
    >
      <ColorPickerLabel>Color</ColorPickerLabel>
      <ColorPickerControl>
        <ColorPickerInput />
        <ColorPickerTrigger />
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerArea />
        <HStack>
          <ColorPickerEyeDropper />
          <ColorPickerSliders />
        </HStack>
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

Store

An alternative way to control the color picker is to use the RootProvider component and the useColorPicker store hook.

This way you can access the color picker state and methods from outside the color picker.

Color

"use client"

import {
  ColorPickerRootProvider,
  HStack,
  parseColor,
  useColorPicker,
} from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerSliders,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

const Demo = () => {
  const colorPicker = useColorPicker({
    defaultValue: parseColor("#eb5e41"),
  })

  return (
    <ColorPickerRootProvider value={colorPicker} maxW="200px">
      <ColorPickerLabel>Color</ColorPickerLabel>
      <ColorPickerControl>
        <ColorPickerInput />
        <ColorPickerTrigger />
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerArea />
        <HStack>
          <ColorPickerEyeDropper />
          <ColorPickerSliders />
        </HStack>
      </ColorPickerContent>
    </ColorPickerRootProvider>
  )
}

Change End

Use the onValueChangeEnd to listen to when the user finishes selecting a color, rather than while they are scrubbing or dragging through the color area.

onChangeEnd: #EB5E41

Color

"use client"

import { Code, HStack, Stack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState(parseColor("#eb5e41"))

  return (
    <Stack gap="8" align="flex-start">
      <Code>
        onChangeEnd: <b>{value.toString("hex")}</b>
      </Code>
      <ColorPickerRoot
        defaultValue={value}
        onValueChangeEnd={(e) => setValue(e.value)}
      >
        <ColorPickerLabel>Color</ColorPickerLabel>
        <ColorPickerControl>
          <ColorPickerInput />
          <ColorPickerTrigger />
        </ColorPickerControl>
        <ColorPickerContent>
          <ColorPickerArea />
          <HStack>
            <ColorPickerEyeDropper />
            <ColorPickerSliders />
          </HStack>
        </ColorPickerContent>
      </ColorPickerRoot>
    </Stack>
  )
}

Channel Slider

Combine the ColorPickerChannelSliders and the format prop to add the different color channels to the color picker.

"use client"

import { ColorPickerFormatSelect, parseColor } from "@chakra-ui/react"
import {
  ColorPickerChannelSliders,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerRoot,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot defaultValue={parseColor("#eb5e41")} maxW="200px">
      <ColorPickerControl>
        <ColorPickerTrigger />
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerFormatSelect />
        <ColorPickerChannelSliders format="hsla" />
        <ColorPickerChannelSliders format="hsba" />
        <ColorPickerChannelSliders format="rgba" />
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

Hook Form

Here's an example of how to integrate the color picker with react-hook-form.

"use client"

import { Button, HStack, Stack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"
import { Controller, useForm } from "react-hook-form"

interface FormValues {
  color: string
}

const Demo = () => {
  const { control, handleSubmit } = useForm<FormValues>({
    defaultValues: { color: "#000000" },
  })

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Stack gap="4" align="flex-start" maxW="sm">
        <Controller
          name="color"
          control={control}
          render={({ field }) => (
            <ColorPickerRoot
              name={field.name}
              defaultValue={parseColor(field.value)}
              onValueChange={(e) => field.onChange(e.valueAsString)}
            >
              <ColorPickerControl>
                <ColorPickerInput />
                <ColorPickerTrigger />
              </ColorPickerControl>
              <ColorPickerContent>
                <ColorPickerArea />
                <HStack>
                  <ColorPickerEyeDropper />
                  <ColorPickerSliders />
                </HStack>
              </ColorPickerContent>
            </ColorPickerRoot>
          )}
        />

        <Button type="submit">Submit</Button>
      </Stack>
    </form>
  )
}

Inline

Use the ColorPickerInlineContent and pass open to the ColorPickerRoot to display an inline version of the color picker.

"use client"

import { HStack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerEyeDropper,
  ColorPickerInlineContent,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerValueSwatch,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot open defaultValue={parseColor("#000")}>
      <ColorPickerInlineContent>
        <ColorPickerArea />
        <HStack>
          <ColorPickerEyeDropper />
          <ColorPickerSliders />
          <ColorPickerValueSwatch />
        </HStack>
      </ColorPickerInlineContent>
    </ColorPickerRoot>
  )
}

Disabled

Pass the disabled prop to disable the color picker.

Color

"use client"

import { HStack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot disabled defaultValue={parseColor("#eb5e41")} maxW="200px">
      <ColorPickerLabel>Color</ColorPickerLabel>
      <ColorPickerControl>
        <ColorPickerInput />
        <ColorPickerTrigger />
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerArea />
        <HStack>
          <ColorPickerEyeDropper />
          <ColorPickerSliders />
        </HStack>
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

Channel Input

Use the ChannelFormatSelect and ColorPickerChannelInputs to create a color picker that allows users to select their preferred channel.

Color

"use client"

import { HStack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerChannelInputs,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot defaultValue={parseColor("#eb5e41")} maxW="200px">
      <ColorPickerLabel>Color</ColorPickerLabel>
      <ColorPickerControl>
        <ColorPickerInput />
        <ColorPickerTrigger />
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerArea />
        <HStack>
          <ColorPickerEyeDropper />
          <ColorPickerSliders />
        </HStack>
        <ColorPickerChannelInputs format="rgba" />
        <ColorPickerChannelInputs format="hsla" />
        <ColorPickerChannelInputs format="hsba" />
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

Fit Content

Here's an example of how to create a rounded trigger that fits the content.

Color

"use client"

import { HStack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerTrigger,
  ColorPickerValueSwatch,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot defaultValue={parseColor("#eb5e41")} maxW="200px">
      <ColorPickerLabel>Color</ColorPickerLabel>
      <ColorPickerControl>
        <ColorPickerInput />
        <ColorPickerTrigger fitContent rounded="full">
          <ColorPickerValueSwatch rounded="inherit" />
        </ColorPickerTrigger>
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerArea />
        <HStack>
          <ColorPickerEyeDropper />
          <ColorPickerSliders />
        </HStack>
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

ReadOnly

Use the readOnly prop to make the color picker component read-only.

Save Swatch

Here's an example of how to save a selected color as a swatch.

"use client"

import {
  Button,
  HStack,
  IconButton,
  Show,
  VStack,
  parseColor,
} from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerSwatchGroup,
  ColorPickerSwatchTrigger,
  ColorPickerTrigger,
  ColorPickerValueSwatch,
} from "@/components/ui/color-picker"
import { useState } from "react"
import { LuPlus, LuType } from "react-icons/lu"

const Demo = () => {
  const [color, setColor] = useState(parseColor("#000"))
  const [view, setView] = useState<"picker" | "swatch">("swatch")
  const [swatches, setSwatches] = useState<string[]>([
    "#FF0000",
    "#00FF00",
    "#0000FF",
    "#FFFF00",
  ])

  return (
    <ColorPickerRoot
      defaultValue={color}
      onValueChange={(e) => setColor(e.value)}
      maxW="200px"
    >
      <ColorPickerControl>
        <ColorPickerTrigger>
          <VStack gap="1">
            <LuType />
            <ColorPickerValueSwatch h="2" />
          </VStack>
        </ColorPickerTrigger>
      </ColorPickerControl>

      <ColorPickerContent>
        <Show when={view === "picker"}>
          <ColorPickerArea />
          <HStack>
            <ColorPickerEyeDropper />
            <ColorPickerSliders />
          </HStack>
          <Button
            onClick={() => {
              setSwatches((prev) => [...prev, color.toString("css")])
              setView("swatch")
            }}
          >
            Save Swatch
          </Button>
        </Show>
        <Show when={view === "swatch"}>
          <ColorPickerSwatchGroup>
            {swatches.map((swatch) => (
              <ColorPickerSwatchTrigger key={swatch} value={swatch} />
            ))}
            <IconButton
              variant="outline"
              size="xs"
              onClick={() => setView("picker")}
            >
              <LuPlus />
            </IconButton>
          </ColorPickerSwatchGroup>
        </Show>
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

Swatches

Here's an example of how to combine the color picker with pre-defined swatches.

Color

"use client"

import { HStack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerSwatchGroup,
  ColorPickerSwatchTrigger,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot defaultValue={parseColor("#eb5e41")} maxW="200px">
      <ColorPickerLabel>Color</ColorPickerLabel>
      <ColorPickerControl>
        <ColorPickerInput />
        <ColorPickerTrigger />
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerArea />
        <HStack>
          <ColorPickerEyeDropper />
          <ColorPickerSliders />
        </HStack>
        <ColorPickerSwatchGroup>
          {swatches.map((item) => (
            <ColorPickerSwatchTrigger
              swatchSize="4.5"
              key={item}
              value={item}
            />
          ))}
        </ColorPickerSwatchGroup>
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

// prettier-ignore
const swatches = ["#000000", "#4A5568", "#F56565", "#ED64A6", "#9F7AEA", "#6B46C1", "#4299E1", "#0BC5EA", "#00B5D8", "#38B2AC", "#48BB78", "#68D391", "#ECC94B", "#DD6B20"]

Swatch and Input

Here's how to compose a swatch with an input.

"use client"

import { ColorPickerChannelInput, parseColor } from "@chakra-ui/react"
import {
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerRoot,
  ColorPickerSwatchGroup,
  ColorPickerSwatchTrigger,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot
      size="xs"
      defaultValue={parseColor("#eb5e41")}
      maxW="200px"
    >
      <ColorPickerControl>
        <ColorPickerTrigger />
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerSwatchGroup>
          {swatches.map((item) => (
            <ColorPickerSwatchTrigger key={item} value={item} />
          ))}
        </ColorPickerSwatchGroup>
        <ColorPickerChannelInput channel="hex" />
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

const swatches = ["red", "blue", "green"]

Swatch and Trigger

Here's how to compose a swatch with a trigger.

"use client"

import { ColorPickerChannelInput, parseColor } from "@chakra-ui/react"
import {
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerRoot,
  ColorPickerSwatchGroup,
  ColorPickerSwatchTrigger,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot
      size="xs"
      defaultValue={parseColor("#eb5e41")}
      maxW="200px"
    >
      <ColorPickerControl>
        <ColorPickerTrigger />
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerSwatchGroup>
          {swatches.map((item) => (
            <ColorPickerSwatchTrigger key={item} value={item} />
          ))}
        </ColorPickerSwatchGroup>
        <ColorPickerChannelInput channel="hex" />
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

const swatches = ["red", "blue", "green"]

Props

Root

Prop	Default	Type
`closeOnSelect`	`false`	`boolean` Whether to close the color picker when a swatch is selected
`format`	`'\'rgba\''`	`ColorFormat` The color format to use
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`openAutoFocus`	`true`	`boolean` Whether to auto focus the color picker when it is opened
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`value`	`'#000000'`	`Color` The current color value
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultOpen`		`boolean` The initial open state of the color picker when it is first rendered. Use when you do not need to control its open state.
`defaultValue`		`Color` The initial value of the color picker when it is first rendered. Use when you do not need to control the state of the color picker.
`disabled`		`boolean` Whether the color picker is disabled
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string; control: string; trigger: string; label: string; input: string; hiddenInput: string; content: string; area: string; areaGradient: string; positioner: string; formatSelect: string; areaThumb: string; channelInput(id: string): string; channelSliderTrack(id: ColorChannel): string; channelSliderT...` The ids of the elements in the color picker. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`initialFocusEl`		`() => HTMLElement \| null` The initial focus element when the color picker is opened.
`invalid`		`boolean` Whether the color picker is invalid
`name`		`string` The name for the form input
`onExitComplete`		`() => void` Function called when the animation ends in the closed state
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onFormatChange`		`(details: FormatChangeDetails) => void` Function called when the color format changes
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Handler that is called when the user opens or closes the color picker.
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onValueChange`		`(details: ValueChangeDetails) => void` Handler that is called when the value changes, as the user drags.
`onValueChangeEnd`		`(details: ValueChangeDetails) => void` Handler that is called when the user stops dragging.
`open`		`boolean` Whether the color picker is open
`positioning`		`PositioningOptions` The positioning options for the color picker
`present`		`boolean` Whether the node is present (controlled by the user)
`readOnly`		`boolean` Whether the color picker is read-only
`required`		`boolean` Whether the color picker is required

Collapsible

Color Swatch

Color Picker

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Setup

Setup