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.
`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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` 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.
`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.
`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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` 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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` 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.
`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.
`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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` 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.
`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.

アクセシビリティ

ColorSelectorは、色選択のアクセシビリティを確保するために適切なARIA属性を使用しています。

キー	説明	状態
`ArrowRight`, `ArrowUp`	スライダー内である場合は`step`の値に基づいて値を増加します。	-
`ArrowLeft`, `ArrowDown`	スライダー内である場合は`step`の値に基づいて値を減少します。	-
`Home`	色相スライダーまたは透明スライダー内である場合は`min`の値を設定します。	-
`End`	色相スライダーまたは透明スライダー内である場合は`max`の値を設定します。	-
`PageUp`	色相スライダーまたは透明スライダー内である場合は`min`と`max`の値に基づいて値を増加します。	-
`PageDown`	色相スライダーまたは透明スライダー内である場合は`min`と`max`の値に基づいて値を減少します。	-

ARIAロールと属性

コンポーネントと要素	ロールと属性	使い方
`ColorSelector.EyeDropper`	`role="button"`	ボタンであることを示します。
	`aria-disabled`	`disabled`または`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-label`	`"色を選択する"`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
`ColorSelector.SaturationSlider > input`	`aria-hidden`	要素をアクセシビリティツリーから除外します。
	`aria-describedby`	`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
`ColorSelector.SaturationSlider > div`	`role="slider"`	スライダーであることを示します。
	`aria-label`	`"彩度と明度のつまみ"`を設定します。
	`aria-describedby`	`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-roledescription`	`"2D slider"`を設定します。
	`aria-valuemin`	`min`の値を設定します。デフォルトは`0`です。
	`aria-valuemax`	`max`の値を設定します。デフォルトは`100`です。
	`aria-valuenow`	現在の値を設定します。
	`aria-valuetext`	`"彩度 18%, 明度 18%"`のように、現在の値を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
`ColorSelector.HueSlider > input`	`aria-hidden`	要素をアクセシビリティツリーから除外します。
	`aria-describedby`	`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
`ColorSelector.HueSlider > div`	`role="slider"`	スライダーであることを示します。
	`aria-label`	`"スライダーのつまみ"`を設定します。
	`aria-describedby`	`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-orientation`	`orientation`の値に基づいて`"horizontal"`または`"vertical"`を設定します。デフォルトは`"horizontal"`です。
	`aria-valuemin`	`min`の値を設定します。デフォルトは`0`です。
	`aria-valuemax`	`max`の値を設定します。デフォルトは`360`です。
	`aria-valuenow`	現在の値を設定します。
	`aria-valuetext`	`"18°, 赤"`のように、現在の値を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
`ColorSelector.AlphaSlider > input`	`aria-hidden`	要素をアクセシビリティツリーから除外します。
	`aria-describedby`	`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
`ColorSelector.AlphaSlider > div`	`role="slider"`	スライダーであることを示します。
	`aria-label`	`"スライダーのつまみ"`を設定します。
	`aria-describedby`	`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-orientation`	`orientation`の値に基づいて`"horizontal"`または`"vertical"`を設定します。デフォルトは`"horizontal"`です。
	`aria-valuemin`	`min`の値を設定します。デフォルトは`0`です。
	`aria-valuemax`	`max`の値を設定します。デフォルトは`1`です。
	`aria-valuenow`	現在の値を設定します。
	`aria-valuetext`	`"18%"`のように、現在の値を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
`ColorSelector.ColorSwatchGroupLabel`	`id`	`ColorSelector.ColorSwatchGroup`に関連付けられます。
`ColorSelector.ColorSwatchGroup`	`role="listbox"`	リストボックスであることを示します。
	`aria-labelledby`	`ColorSelector.ColorSwatchGroupLabel`に関連付けられます。
`ColorSelector.ColorSwatchItem`	`role="option"`	オプションであることを示します。
	`aria-label`	現在の値を設定します。
	`aria-roledescription`	`"color swatch"`を設定します。
	`aria-selected`	`value`と同じ値の場合は、`"true"`が設定されます。
	`aria-disabled`	`disabled`または`readOnly`が設定されている場合は`"true"`を設定します。