ColorSelector
ColorSelector is a component used by the user to select a color.
<ColorSelector.Root maxW="md" />
Usage
import { ColorPicker } from "@yamada-ui/react"
import { ColorPicker } from "@/components/ui"
import { ColorPicker } from "@workspaces/ui"
<ColorSelector.Root>
<ColorSelector.SaturationSlider />
<ColorSelector.HueSlider />
<ColorSelector.AlphaSlider />
<ColorSelector.ColorSwatchGroupLabel />
<ColorSelector.ColorSwatchGroup>
<ColorSelector.ColorSwatchItem />
</ColorSelector.ColorSwatchGroup>
</ColorSelector.Root>
Change Size
<VStack>
<For each={["sm", "md", "lg"]}>
{(size, index) => <ColorSelector.Root maxW="md" key={index} size={size} />}
</For>
</VStack>
Change Default Value
To change the default value, set defaultValue to a value.
<ColorSelector.Root defaultValue="#775999" maxW="md" />
Change Alpha Value
To change the alpha value, set defaultValue to a value containing the alpha value, or set format to "hexa" or "hsla" etc.
<ColorSelector.Root defaultValue="#775999A0" maxW="md" />
Change Color Swatches
To change the color swatches, set colorSwatches to an array.
Pick a color
<ColorSelector.Root
colorSwatches={[
"hsl(0, 100%, 50%)",
"hsl(45, 100%, 50%)",
"hsl(90, 100%, 50%)",
"hsl(135, 100%, 50%)",
"hsl(180, 100%, 50%)",
"hsl(225, 100%, 50%)",
"hsl(270, 100%, 50%)",
"hsl(315, 100%, 50%)",
]}
colorSwatchGroupLabel="Pick a color"
maxW="md"
/>
Change Color Swatch Group Columns
To change the number of columns in the color swatch group, set colorSwatchGroupColumns to a number.
Pick a color
<ColorSelector.Root
colorSwatches={[
"hsl(0, 100%, 50%)",
"hsl(36, 100%, 50%)",
"hsl(72, 100%, 50%)",
"hsl(108, 100%, 50%)",
"hsl(144, 100%, 50%)",
"hsl(180, 100%, 50%)",
"hsl(216, 100%, 50%)",
"hsl(252, 100%, 50%)",
"hsl(288, 100%, 50%)",
"hsl(324, 100%, 50%)",
]}
colorSwatchGroupColumns={10}
colorSwatchGroupLabel="Pick a color"
maxW="md"
/>
Change Shape
<VStack>
<For each={["rounded", "circle", "square"]}>
{(shape, index) => (
<ColorSelector.Root key={index} format="hexa" maxW="md" shape={shape} />
)}
</For>
</VStack>
Make Disabled
<ColorSelector.Root disabled maxW="md" />
Make Read Only
<ColorSelector.Root maxW="md" readOnly />
Customize Component
const [value, setValue] = useState("#FF0000FF")
return (
<Popover.Root placement="end-start">
<Popover.Trigger>
<Center rounded="full" w="fit-content">
<ColorSwatch color={value} variant="circle" />
</Center>
</Popover.Trigger>
<Popover.Content w="xs" p="1">
<Popover.Body>
<ColorSelector.Root value={value} onChange={setValue} />
</Popover.Body>
</Popover.Content>
</Popover.Root>
)
If you use this code, you need to add
"use client" to the top of the file.Control
const [value, setValue] = useState("#FF0000A0")
return <ColorSelector.Root maxW="md" value={value} onChange={setValue} />
If you use this code, you need to add
"use client" to the top of the file.