Color Picker
Used to select colors from a color area or a set of defined swatches
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
const Demo = () => {
return (
<ColorPicker.Root defaultValue={parseColor("#eb5e41")} maxW="200px">
<ColorPicker.HiddenInput />
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="xs" variant="outline" />
<ColorPicker.Sliders />
</HStack>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)
}
Usage
import { ColorPicker } from "@chakra-ui/react"
<ColorPicker.Root>
<ColorPicker.HiddenInput />
<ColorPicker.Label />
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger />
</ColorPicker.Control>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<ColorPicker.EyeDropper />
<ColorPicker.Sliders />
<ColorPicker.SwatchGroup>
<ColorPicker.SwatchTrigger>
<ColorPicker.Swatch />
</ColorPicker.SwatchTrigger>
</ColorPicker.SwatchGroup>
</ColorPicker.Content>
</ColorPicker.Positioner>
</ColorPicker.Root>
Shortcuts
ColorPicker.ChannelSlider
This component renders the slider track, thumb and transparency grid.
<ColorPicker.ChannelSlider />
is the same as:
<ColorPicker.ChannelSlider>
<ColorPickerTransparencyGrid />
<ColorPickerChannelSliderTrack />
<ColorPickerChannelSliderThumb />
</ColorPicker.ChannelSlider>
ColorPicker.Sliders
This is a shortcut component for the hue and alpha sliders:
<Stack>
<ColorPickerChannelSlider channel="hue" />
<ColorPickerChannelSlider channel="alpha" />
</Stack>
ColorPicker.Area
This component renders the color area thumb and background.
<ColorPicker.Area>
<ColorPicker.AreaThumb />
<ColorPicker.AreaBackground />
</ColorPicker.Area>
is the same as:
<ColorPicker.Area />
ColorPicker.EyeDropper
This is a shortcut component for:
<ColorPicker.EyeDropperTrigger asChild>
<IconButton>
<LuPipette />
</IconButton>
</ColorPicker.EyeDropperTrigger>
Examples
Sizes
Use the size
prop to change the size of the color picker.
"use client"
import {
ColorPicker,
For,
HStack,
Portal,
Stack,
parseColor,
} from "@chakra-ui/react"
import { LuCheck } from "react-icons/lu"
const Demo = () => {
return (
<Stack gap="8" maxW="sm">
<For each={["2xs", "xs", "sm", "md", "lg", "xl", "2xl"]}>
{(size) => (
<ColorPicker.Root
key={size}
defaultValue={parseColor("#eb5e41")}
size={size}
>
<ColorPicker.HiddenInput />
<ColorPicker.Label>Color ({size})</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="sm" variant="outline" />
<ColorPicker.Sliders />
</HStack>
<ColorPicker.SwatchGroup>
{swatches.map((item) => (
<ColorPicker.SwatchTrigger key={item} value={item}>
<ColorPicker.Swatch value={item} boxSize="4.5">
<ColorPicker.SwatchIndicator>
<LuCheck />
</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
))}
</ColorPicker.SwatchGroup>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)}
</For>
</Stack>
)
}
const swatches = ["red", "blue", "green"]
Variants
Use the variant
prop to change the visual style of the color picker. Values
can be either outline
or subtle
.
"use client"
import {
ColorPicker,
For,
HStack,
Portal,
Stack,
parseColor,
} from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="8">
<For each={["outline", "subtle"]}>
{(variant) => (
<ColorPicker.Root
defaultValue={parseColor("#eb5e41")}
maxW="200px"
variant={variant}
>
<ColorPicker.HiddenInput />
<ColorPicker.Label>Color ({variant})</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="xs" variant="outline" />
<ColorPicker.Sliders />
</HStack>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)}
</For>
</Stack>
)
}
Input Only
Combine the ColorPicker.ValueSwatch
and the ColorPicker.EyeDropper
on the
InputGroup
to render a color picker that contains only an input.
"use client"
import { ColorPicker, InputGroup, parseColor } from "@chakra-ui/react"
const Demo = () => {
return (
<ColorPicker.Root defaultValue={parseColor("#eb5e41")} maxW="200px">
<ColorPicker.HiddenInput />
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<InputGroup
startElement={<ColorPicker.ValueSwatch boxSize="4.5" />}
endElementProps={{ px: "1" }}
endElement={<ColorPicker.EyeDropper size="xs" variant="ghost" />}
>
<ColorPicker.Input />
</InputGroup>
</ColorPicker.Control>
</ColorPicker.Root>
)
}
Swatch Only
Use the ColorPicker.SwatchGroup
and ColorPicker.SwatchTrigger
to render only
the color swatches.
import { ColorPicker } from "@chakra-ui/react"
const Demo = () => {
return (
<ColorPicker.Root alignItems="flex-start">
<ColorPicker.HiddenInput />
<ColorPicker.Label>
Color: <ColorPicker.ValueText />
</ColorPicker.Label>
<ColorPicker.SwatchGroup>
{swatches.map((item) => (
<ColorPicker.SwatchTrigger key={item} value={item}>
<ColorPicker.Swatch value={item}>
<ColorPicker.SwatchIndicator boxSize="3" bg="white" />
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
))}
</ColorPicker.SwatchGroup>
</ColorPicker.Root>
)
}
const swatches = ["red", "green", "blue", "purple", "orange", "pink"]
Trigger Only
Compose the color picker to initially show only a trigger using the
ColorPicker.ValueSwatch
and ColorPicker.ValueText
.
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
const Demo = () => {
return (
<ColorPicker.Root defaultValue={parseColor("#eb5e41")} maxW="200px">
<ColorPicker.HiddenInput />
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.Trigger px="2">
<ColorPicker.ValueSwatch boxSize="6" />
<ColorPicker.ValueText minW="160px" />
</ColorPicker.Trigger>
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="sm" variant="outline" />
<ColorPicker.Sliders />
<ColorPicker.ValueSwatch />
</HStack>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)
}
Trigger Inside Input
Compose the color picker to trigger in input using the InputGroup
and
ColorPickerInput
.
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
const Demo = () => {
return (
<ColorPicker.Root defaultValue={parseColor("#eb5e41")} maxW="200px">
<ColorPicker.HiddenInput />
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.Trigger px="2">
<ColorPicker.ValueSwatch boxSize="6" />
<ColorPicker.ValueText minW="160px" />
</ColorPicker.Trigger>
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="sm" variant="outline" />
<ColorPicker.Sliders />
<ColorPicker.ValueSwatch />
</HStack>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)
}
Controlled
Use the value
and onValueChange
props to control the state of the color
picker.
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
import { useState } from "react"
const Demo = () => {
const [color, setColor] = useState(parseColor("#eb5e41"))
return (
<ColorPicker.Root
value={color}
format="hsla"
onValueChange={(e) => setColor(e.value)}
maxW="200px"
>
<ColorPicker.HiddenInput />
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="xs" variant="outline" />
<ColorPicker.Sliders />
</HStack>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)
}
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.
"use client"
import {
ColorPicker,
HStack,
Portal,
parseColor,
useColorPicker,
} from "@chakra-ui/react"
const Demo = () => {
const colorPicker = useColorPicker({
defaultValue: parseColor("#eb5e41"),
})
return (
<ColorPicker.RootProvider value={colorPicker} maxW="200px">
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="xs" variant="outline" />
<ColorPicker.Sliders />
</HStack>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.RootProvider>
)
}
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
"use client"
import {
Code,
ColorPicker,
HStack,
Portal,
Stack,
parseColor,
} from "@chakra-ui/react"
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>
<ColorPicker.Root
defaultValue={value}
onValueChangeEnd={(e) => setValue(e.value)}
>
<ColorPicker.HiddenInput />
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="xs" variant="outline" />
<ColorPicker.Sliders />
</HStack>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
</Stack>
)
}
Channel Slider
Combine the ColorPickerChannelSliders
and the format
prop to add the
different color channels to the color picker.
"use client"
import {
ColorPicker,
For,
Portal,
Stack,
getColorChannels,
parseColor,
} from "@chakra-ui/react"
const ChannelSliders = (props: { format: ColorPicker.ColorFormat }) => {
const channels = getColorChannels(props.format)
return (
<ColorPicker.View format={props.format}>
<For each={channels}>
{(channel) => (
<Stack gap="1" key={channel}>
<ColorPicker.ChannelText minW="5ch">
{channel}
</ColorPicker.ChannelText>
<ColorPicker.ChannelSlider channel={channel} />
</Stack>
)}
</For>
</ColorPicker.View>
)
}
const Demo = () => {
return (
<ColorPicker.Root defaultValue={parseColor("#eb5e41")} maxW="200px">
<ColorPicker.Control>
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.FormatSelect />
<ChannelSliders format="hsla" />
<ChannelSliders format="hsba" />
<ChannelSliders format="rgba" />
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)
}
Hook Form
Here's an example of how to integrate the color picker with react-hook-form
.
"use client"
import {
Button,
ColorPicker,
HStack,
Portal,
Stack,
parseColor,
} from "@chakra-ui/react"
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 }) => (
<ColorPicker.Root
name={field.name}
defaultValue={parseColor(field.value)}
onValueChange={(e) => field.onChange(e.valueAsString)}
>
<ColorPicker.HiddenInput />
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="sm" variant="outline" />
<ColorPicker.Sliders />
</HStack>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)}
/>
<Button type="submit">Submit</Button>
</Stack>
</form>
)
}
Inline
Here's an example of how to display an inline version of the color picker.
"use client"
import { ColorPicker, HStack, parseColor } from "@chakra-ui/react"
const Demo = () => {
return (
<ColorPicker.Root open defaultValue={parseColor("#000")}>
<ColorPicker.HiddenInput />
<ColorPicker.Content animation="none" shadow="none" padding="0">
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="xs" variant="outline" />
<ColorPicker.Sliders />
<ColorPicker.ValueSwatch />
</HStack>
</ColorPicker.Content>
</ColorPicker.Root>
)
}
Disabled
Pass the disabled
prop to disable the color picker.
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
const Demo = () => {
return (
<ColorPicker.Root
disabled
defaultValue={parseColor("#eb5e41")}
maxW="200px"
>
<ColorPicker.HiddenInput />
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="xs" variant="outline" />
<ColorPicker.Sliders />
</HStack>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)
}
Channel Input
Use the ChannelFormat.Select
and ColorPicker.ChannelInput
to create a color
picker that allows users to select their preferred channel.
"use client"
import {
ColorPicker,
For,
HStack,
Portal,
VStack,
getColorChannels,
parseColor,
} from "@chakra-ui/react"
const ChannelInputs = (props: { format: ColorPicker.ColorFormat }) => {
const channels = getColorChannels(props.format)
return (
<ColorPicker.View format={props.format}>
<For each={channels}>
{(channel) => (
<VStack gap="1" key={channel} flex="1">
<ColorPicker.ChannelInput
channel={channel}
px="0"
height="7"
textStyle="xs"
textAlign="center"
/>
<ColorPicker.ChannelText>
{channel.charAt(0).toUpperCase()}
</ColorPicker.ChannelText>
</VStack>
)}
</For>
</ColorPicker.View>
)
}
const Demo = () => {
return (
<ColorPicker.Root defaultValue={parseColor("#eb5e41")} maxW="200px">
<ColorPicker.HiddenInput />
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="xs" variant="outline" />
<ColorPicker.Sliders />
</HStack>
<ChannelInputs format="rgba" />
<ChannelInputs format="hsla" />
<ChannelInputs format="hsba" />
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)
}
Fit Content
Pass the data-fit-content
attribute to the ColorPicker.Trigger
to make it
fit the content.
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
const Demo = () => {
return (
<ColorPicker.Root defaultValue={parseColor("#eb5e41")} maxW="200px">
<ColorPicker.HiddenInput />
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger data-fit-content rounded="full">
<ColorPicker.ValueSwatch rounded="inherit" />
</ColorPicker.Trigger>
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="sm" variant="outline" />
<ColorPicker.Sliders />
</HStack>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)
}
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,
ColorPicker,
HStack,
IconButton,
Portal,
Show,
VStack,
parseColor,
} from "@chakra-ui/react"
import { useState } from "react"
import { LuCheck, 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 (
<ColorPicker.Root
defaultValue={color}
onValueChange={(e) => setColor(e.value)}
maxW="200px"
>
<ColorPicker.HiddenInput />
<ColorPicker.Control>
<ColorPicker.Trigger data-fit-content>
<VStack gap="1">
<LuType />
<ColorPicker.ValueSwatch h="2" />
</VStack>
</ColorPicker.Trigger>
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<Show when={view === "picker"}>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="sm" variant="outline" />
<ColorPicker.Sliders />
</HStack>
<Button
onClick={() => {
setSwatches((prev) => [...prev, color.toString("css")])
setView("swatch")
}}
>
Save Swatch
</Button>
</Show>
<Show when={view === "swatch"}>
<ColorPicker.SwatchGroup>
{swatches.map((swatch) => (
<ColorPicker.SwatchTrigger key={swatch} value={swatch}>
<ColorPicker.Swatch value={swatch}>
<ColorPicker.SwatchIndicator>
<LuCheck />
</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
))}
<IconButton
variant="outline"
size="xs"
onClick={() => setView("picker")}
>
<LuPlus />
</IconButton>
</ColorPicker.SwatchGroup>
</Show>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)
}
Swatches
Here's an example of how to combine the color picker with pre-defined swatches.
"use client"
import { ColorPicker, HStack, Portal, parseColor } from "@chakra-ui/react"
import { LuCheck } from "react-icons/lu"
const Demo = () => {
return (
<ColorPicker.Root defaultValue={parseColor("#eb5e41")} maxW="200px">
<ColorPicker.HiddenInput />
<ColorPicker.Label>Color</ColorPicker.Label>
<ColorPicker.Control>
<ColorPicker.Input />
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.Area />
<HStack>
<ColorPicker.EyeDropper size="xs" variant="outline" />
<ColorPicker.Sliders />
</HStack>
<ColorPicker.SwatchGroup>
{swatches.map((item) => (
<ColorPicker.SwatchTrigger key={item} value={item}>
<ColorPicker.Swatch boxSize="4.5" value={item}>
<ColorPicker.SwatchIndicator>
<LuCheck />
</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
))}
</ColorPicker.SwatchGroup>
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)
}
// 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 { ColorPicker, Portal, parseColor } from "@chakra-ui/react"
import { LuCheck } from "react-icons/lu"
const Demo = () => {
return (
<ColorPicker.Root
size="xs"
defaultValue={parseColor("#eb5e41")}
maxW="200px"
>
<ColorPicker.HiddenInput />
<ColorPicker.Control>
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.SwatchGroup>
{swatches.map((item) => (
<ColorPicker.SwatchTrigger key={item} value={item}>
<ColorPicker.Swatch value={item}>
<ColorPicker.SwatchIndicator>
<LuCheck />
</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
))}
</ColorPicker.SwatchGroup>
<ColorPicker.ChannelInput channel="hex" />
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)
}
const swatches = ["red", "blue", "green"]
Swatch and Trigger
Here's how to compose a swatch with a trigger.
"use client"
import { ColorPicker, Portal, parseColor } from "@chakra-ui/react"
import { LuCheck } from "react-icons/lu"
const Demo = () => {
return (
<ColorPicker.Root
size="xs"
defaultValue={parseColor("#eb5e41")}
maxW="200px"
>
<ColorPicker.HiddenInput />
<ColorPicker.Control>
<ColorPicker.Trigger />
</ColorPicker.Control>
<Portal>
<ColorPicker.Positioner>
<ColorPicker.Content>
<ColorPicker.SwatchGroup>
{swatches.map((item) => (
<ColorPicker.SwatchTrigger key={item} value={item}>
<ColorPicker.Swatch value={item}>
<ColorPicker.SwatchIndicator>
<LuCheck />
</ColorPicker.SwatchIndicator>
</ColorPicker.Swatch>
</ColorPicker.SwatchTrigger>
))}
</ColorPicker.SwatchGroup>
<ColorPicker.ChannelInput channel="hex" />
</ColorPicker.Content>
</ColorPicker.Positioner>
</Portal>
</ColorPicker.Root>
)
}
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 |
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' The color palette of the component |
size | 'md' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' The size of the component |
variant | 'outline' | 'outline' | 'subtle' The variant of the component |
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 |