ColorSelector

ColorSelectorは、ユーザーが色を選択するために使用されるコンポーネントです。

<ColorSelector.Root maxW="md" />

使い方

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>

サイズを変更する

<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => <ColorSelector.Root maxW="md" key={index} size={size} />}
  </For>
</VStack>

デフォルトの値を設定する

デフォルトの値を設定する場合は、defaultValueに値を設定します。

<ColorSelector.Root defaultValue="#775999" maxW="md" />

アルファ値を設定する

アルファ値を設定する場合は、defaultValueにアルファ値を含む値を設定するか、formatに"hexa"や"hsla"などを設定します。

<ColorSelector.Root defaultValue="#775999A0" maxW="md" />

候補を表示する

候補を表示する場合は、colorSwatchesに配列を設定します。

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"
/>

候補の列を変更する

候補の列を変更する場合は、colorSwatchGroupColumnsに数値を設定します。

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"
/>

形を変える

<VStack>
  <For each={["rounded", "circle", "square"]}>
    {(shape, index) => (
      <ColorSelector.Root key={index} format="hexa" maxW="md" shape={shape} />
    )}
  </For>
</VStack>

無効にする

<ColorSelector.Root disabled maxW="md" />

読み取り専用にする

<ColorSelector.Root maxW="md" readOnly />

コンポーネントをカスタマイズする

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>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

制御する

const [value, setValue] = useState("#FF0000A0")

return <ColorSelector.Root maxW="md" value={value} onChange={setValue} />

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

ColorSelector.Root

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`alphaSliderProps`	-	`ColorSelectorAlphaSliderProps` Props for the alpha slider.
`colorSwatches`	-	`string[]` An array of colors in one of the supported formats. Used to render swatches list below the color selector.
`colorSwatchGroupColumns`	`8`	`number` The number of columns in the color swatch group.
`colorSwatchGroupLabel`	-	`ReactNode` The label of the color swatch group.
`colorSwatchGroupLabelProps`	-	`ColorSelectorColorSwatchGroupLabelProps` Props for the color swatch group label.
`colorSwatchGroupProps`	-	`ColorSelectorColorSwatchGroupProps` Props for the color swatch group.
`colorSwatchItemProps`	-	`Omit<ColorSelectorColorSwatchItemProps, "value">` Props for the color swatch item.
`defaultValue`	`fallbackValue`	`string` The initial value of the color selector.
`disabled`	`false`	`boolean` If `true`, the color selector will be disabled.
`fallbackValue`	`"#FFFFFF"`	`string` The fallback value of the color selector.
`format`	`"hex"`	`ColorFormat` The format of the color selector. Automatically determines the format of `value` or `defaultValue`.
`hueSliderProps`	-	`ColorSelectorHueSliderProps` Props for the hue slider.
`onChange`	-	`(value: string) => void` The callback invoked when the value changes.
`onChangeEnd`	-	`(value: string) => void` The callback invoked when the value changes ends.
`onChangeStart`	-	`(value: string) => void` The callback invoked when the value changes starts.
`readOnly`	`false`	`boolean` If `true`, the color selector will be read only.
`saturationSliderProps`	-	`ColorSelectorSaturationSliderProps` Props for the saturation slider.
`shape`	`"circle"`	`"circle" \| "rounded" \| "square"` The shape of the thumb and color swatch.
`value`	-	`string` The value of the color selector.
`withAlpha`	`false`	`boolean` If `true`, the alpha slider will be displayed.

ColorSelector.AlphaSlider

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"outline" \| "solid"` The variant of the component.
`color`	-	`string` The color used for the slider.
`defaultValue`	-	`number` The initial value of the slider.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`getAriaValueText`	-	`(value: number, index: number) => string \| undefined` This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input.
`indicatorFill`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The fill color of the indicator.
`indicatorRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the indicator.
`inputProps`	-	`SliderInputProps` Props for the input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`max`	`1`	`number` The maximum allowed value of the slider. Cannot be less than min.
`min`	`0`	`number` The minimum allowed value of the slider. Cannot be greater than max.
`name`	-	`string` The name attribute of the hidden `input` field. This is particularly useful in forms.
`onChange`	-	`(value: number) => void` Function called whenever the slider value changes.
`onChangeEnd`	-	`(value: number) => void` Function called when the user is done selecting a new value.
`onChangeStart`	-	`(value: number) => void` Function called when the user starts selecting a new value.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the slider.
`overlayProps`	-	`AlphaSliderOverlayProps` Props for the overlay element.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`shape`	`"circle"`	`"circle" \| "rounded" \| "square"` The shape of the thumb.
`step`	`0.01`	`number` The step in which increments or decrements have to be made.
`thumbProps`	-	`AlphaSliderThumbProps` Props for the thumb element.
`thumbRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the thumb.
`thumbSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the thumb.
`thumbStroke`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The stroke color of the thumb.
`trackProps`	-	`AlphaSliderTrackProps` Props for the track element.
`trackRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the track.
`trackSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the track.
`value`	-	`number` The value of the slider.

ColorSelector.ColorSwatchGroup

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ColorSelector.ColorSwatchGroupLabel

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ColorSelector.ColorSwatchItem

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"2xl" \| "2xs" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"circle" \| "plain" \| "square"` The variant of the component.
`value`	-	`string` The value of the color swatch.
`layers`	-	`HTMLStyledProps[]` The overlay used for the swatch element.
`withShadow`	`true`	`boolean` If `true`, the swatch element has an inner `box-shadow`.

ColorSelector.EyeDropper

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`icon`	-	`ReactNode` The icon to display in the eye dropper.

ColorSelector.HueSlider

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"outline" \| "solid"` The variant of the component.
`defaultValue`	-	`number` The initial value of the slider.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`getAriaValueText`	-	`(value: number, index: number) => string \| undefined` This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input.
`indicatorFill`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The fill color of the indicator.
`indicatorRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the indicator.
`inputProps`	-	`SliderInputProps` Props for the input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`max`	`360`	`number` The maximum allowed value of the slider. Cannot be less than min.
`min`	`0`	`number` The minimum allowed value of the slider. Cannot be greater than max.
`name`	-	`string` The name attribute of the hidden `input` field. This is particularly useful in forms.
`onChange`	-	`(value: number) => void` Function called whenever the slider value changes.
`onChangeEnd`	-	`(value: number) => void` Function called when the user is done selecting a new value.
`onChangeStart`	-	`(value: number) => void` Function called when the user starts selecting a new value.
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the slider.
`overlayProps`	-	`HueSliderOverlayProps` Props for the overlay element.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`shape`	`"circle"`	`"circle" \| "rounded" \| "square"` The shape of the thumb.
`step`	`1`	`number` The step in which increments or decrements have to be made.
`thumbProps`	-	`HueSliderThumbProps` Props for the thumb element.
`thumbRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the thumb.
`thumbSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the thumb.
`thumbStroke`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The stroke color of the thumb.
`trackProps`	-	`HueSliderTrackProps` Props for the track element.
`trackRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the track.
`trackSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the track.
`value`	-	`number` The value of the slider.

ColorSelector.SaturationSlider

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`defaultValue`	`[0, 0, 1]`	`[number, number, number]` The initial value of the saturation slider.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`getAriaValueText`	-	`(value: [number, number, number]) => string \| undefined` This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input.
`id`	-	`string` The base `id` to use for the slider.
`inputProps`	-	`HTMLStyledProps<"input">` Props for the input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`name`	-	`string` The name attribute of the hidden `input` field. This is particularly useful in forms.
`onChange`	-	`(value: [number, number, number]) => void` Function called whenever the saturation slider value changes.
`onChangeEnd`	-	`(value: [number, number, number]) => void` Function called when the user is done selecting a new value.
`onChangeStart`	-	`(value: [number, number, number]) => void` Function called when the user starts selecting a new value.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`shape`	`"circle"`	`"circle" \| "rounded" \| "square"` The shape of the thumb.
`step`	`0.01`	`number` The step in which increments or decrements have to be made.
`thumbProps`	-	`SaturationSliderThumbProps` Props for the thumb element.
`trackProps`	-	`SaturationSliderTrackProps` Props for the track element.
`value`	-	`[number, number, number]` The value of the saturation slider.