ColorPicker

ColorPickerは、ユーザーが色を選択したり任意の色の値を入力するために使用されるコンポーネントです。

<ColorPicker placeholder="#4387f4" />

使い方

import { ColorPicker } from "@yamada-ui/react"

import { ColorPicker } from "@/components/ui"

import { ColorPicker } from "@workspaces/ui"

<ColorPicker />

バリアントを変更する

<VStack>
  <For each={["outline", "filled", "flushed", "plain"]}>
    {(variant, index) => (
      <ColorPicker
        key={index}
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

サイズを変更する

<VStack>
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <ColorPicker key={index} size={size} placeholder={`Size (${size})`} />
    )}
  </For>
</VStack>

カラースキームを変更する

<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <ColorPicker
        key={index}
        colorScheme={colorScheme}
        placeholder="#4387f4"
      />
    )}
  </For>
</VStack>

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

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

<ColorPicker defaultValue="#4387f4" placeholder="#4387f4" />

アルファ値を設定する

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

<ColorPicker defaultValue="#775999A0" placeholder="#775999A0" />

フォーマットを変更する

フォーマットを変更する場合は、formatに値を設定します。デフォルトでは、valueまたはdefaultValueの文字列からフォーマットを判定しています。

<ColorPicker placeholder="hsl(0, 100%, 50%)" format="hsl" />

入力値を制限する

入力値を制限する場合は、patternに正規表現を設定します。

<ColorPicker placeholder="#4387f4" pattern={/[^a-fA-F0-9#]/g} />

入力値をフォーマットする

入力値をフォーマットする場合は、formatInputに関数を設定します。

<ColorPicker
  placeholder="#4387f4"
  pattern={/[^a-fA-F0-9#]/g}
  formatInput={(value) => value.toUpperCase()}
/>

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

候補を表示する

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

<ColorPicker
  placeholder="#4387f4"
  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"
/>

候補の列を変更する

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

<ColorPicker
  placeholder="#4387f4"
  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%)",
  ]}
  colorSwatchGroupLabel="Pick a color"
  colorSwatchGroupColumns={10}
/>

オフセットを変更する

オフセットを変更する場合は、gutterまたはoffsetに値を設定します。

<ColorPicker placeholder="#4387f4" gutter={16} />

アニメーションを変更する

アニメーションを変更する場合は、animationSchemeに"block-start"や"inline-end"などを設定します。デフォルトでは、"scale"が設定されています。

<ColorPicker placeholder="#4387f4" animationScheme="inline-start" />

配置を変更する

配置を変更するには、placementにendやstart-centerなどを設定します。デフォルトでは、end-startが設定されています。

<ColorPicker
  placeholder="#4387f4"
  animationScheme="inline-start"
  placement="center-end"
  rootProps={{ w: "xs" }}
/>

スクロールをブロックする

スクロールをブロックするには、blockScrollOnMountをtrueに設定します。

<ColorPicker placeholder="#4387f4" blockScrollOnMount />

スクロール時にドロップダウンを閉じる場合は、closeOnScrollをtrueに設定します。

<ColorPicker placeholder="#4387f4" closeOnScroll />

変更時にドロップダウンを開くイベントをハンドルする場合は、openOnChangeに関数を設定します。

<ColorPicker
  placeholder="#4387f4"
  openOnFocus={false}
  openOnChange={(ev) => ev.target.value.length > 1}
/>

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

変更時にドロップダウンを閉じるイベントをハンドルする場合は、closeOnChangeに関数を設定します。

<ColorPicker
  placeholder="#4387f4"
  openOnFocus={false}
  closeOnChange={(ev) => !ev.target.value.length}
/>

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

フォーカス時にドロップダウンを開かない場合は、openOnFocusをfalseに設定します。

<ColorPicker placeholder="#4387f4" openOnFocus={false} />

クリック時にドロップダウンを開かない場合は、openOnClickをfalseに設定します。

<ColorPicker placeholder="#4387f4" openOnClick={false} />

フォーカスが外れた場合に閉じない

フォーカスが外れた場合にドロップダウンを閉じない場合は、closeOnBlurをfalseに設定します。

<ColorPicker placeholder="#4387f4" closeOnBlur={false} />

ESCキーが入力された時にドロップダウンを閉じない

ESCキーが入力された時にドロップダウンを閉じない場合は、closeOnEscをfalseに設定します。

<ColorPicker placeholder="#4387f4" closeOnEsc={false} />

入力を許可しない

入力を許可しない場合は、allowInputをfalseに設定します。

<ColorPicker placeholder="#4387f4" allowInput={false} />

形を変える

<VStack>
  <For each={["rounded", "circle", "square"]}>
    {(shape, index) => (
      <ColorPicker
        key={index}
        placeholder="#4387f4"
        selectorProps={{ shape }}
      />
    )}
  </For>
</VStack>

無効にする

無効にする場合は、disabledをtrueに設定します。

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant, index) => (
      <ColorPicker
        key={index}
        variant={variant}
        disabled
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

読み取り専用にする

読み取り専用にする場合は、readOnlyをtrueに設定します。

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant, index) => (
      <ColorPicker
        key={index}
        variant={variant}
        readOnly
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

無効な入力にする

無効な入力にする場合は、invalidをtrueに設定します。

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant, index) => (
      <ColorPicker
        key={index}
        variant={variant}
        invalid
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

ボーダーの色を変更する

ボーダーの色を変更する場合は、focusBorderColorまたはerrorBorderColorに値を設定します。

<VStack>
  <ColorPicker focusBorderColor="green.500" placeholder="custom border color" />
  <ColorPicker
    invalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>

制御する

const [value, onChange] = useState<string>("#4387f4")

return <ColorPicker value={value} onChange={onChange} />

Props

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.
`variant`	`"outline"`	`"filled" \| "flushed" \| "outline" \| "plain"` The variant of the component.
`allowInput`	`true`	`boolean` If `true`, allows input.
`alphaSliderProps`	-	`ColorSelectorAlphaSliderProps` Props for the alpha slider.
`animationScheme`	`"scale"`	`"none" \| "scale" \| SimplePlacement` The animation of the element.
`autoUpdate`	`true`	`boolean` If `true`, automatically updates the position of the floating element when necessary.
`blockScrollOnMount`	`false`	`boolean` If `true`, scrolling will be disabled on the `body` when the modal opens.
`closeOnBlur`	`true`	`boolean` If `true`, the popover will close when you blur out it by clicking outside or tabbing out.
`closeOnChange`	`false`	`((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean` If `true`, the color picker will be closed when the input value changes.
`closeOnEsc`	`true`	`boolean` If `true`, the popover will hide on pressing Esc key.
`closeOnScroll`	`false`	`boolean` If `true`, the popover will hide on scroll.
`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`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` 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.
`colorSwatchProps`	-	`ColorPickerColorSwatchProps` Props for the color swatch component.
`contentProps`	-	`ColorPickerContentProps` Props for content element.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`defaultValue`	-	`string` The initial value of the color picker.
`disabled`	`false`	`boolean` If `true`, the combobox will be disabled.
`duration`	`0.2`	`MotionTransitionProps["duration"]` The animation duration.
`elementProps`	-	`InputGroup.ElementProps` The props for the input element.
`elements`	-	`{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined }` Object containing the reference and floating elements.
`endElementProps`	-	`InputGroup.ElementProps` The props for the end element.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`eyeDropperProps`	-	`ColorPickerEyeDropperProps` Props for the eye dropper component.
`fallbackValue`	`"#FFFFFF"`	`string` The fallback value of the color picker.
`fieldProps`	-	`ColorPickerFieldProps` The props for the field component.
`flip`	`true`	`boolean` If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
`focusBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is focused.
`format`	`"hex"`	`ColorFormat` The format of the color picker. Automatically determines the format of `value` or `defaultValue`.
`formatInput`	-	`(value: string) => string` The function to format the input value.
`gutter`	`8`	`number` The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.
`hueSliderProps`	-	`ColorSelectorHueSliderProps` Props for the hue slider.
`inputProps`	-	`HTMLStyledProps<"input">` The props for the input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`matchWidth`	`false`	`boolean` If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
`middleware`	-	`(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: { detectOverflow: (state: MiddlewareState, options?: DetectOverflowOptions \| Derivable<...> \| undefined) => Promise<...>; } & Platform; ... 4 more ...; elements: Elements; }) => Promisable<...>; } \| null \| und...` Array of middleware objects to modify the positioning or provide data for rendering.
`name`	-	`string` The `name` attribute of the input element.
`offset`	-	`[number, number]` The main and cross-axis offset to displace popper element from its reference element.
`onChange`	-	`(value: string) => void` The callback invoked when the value changes.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onInputChange`	-	`(ev: ChangeEvent<HTMLInputElement>) => void` The callback invoked when input value state changes.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`open`	-	`boolean` If `true`, the element will be opened.
`openOnChange`	`true`	`((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean` If `true`, the color picker will be opened when the input value changes.
`openOnClick`	`true`	`boolean` If `true`, the combobox will be opened when click on the field.
`openOnEnter`	`true`	`boolean` If `true`, the combobox will be opened when enter is pressed.
`openOnFocus`	`false`	`boolean` If `true`, the color picker will be opened when the input is focused.
`openOnSpace`	`true`	`boolean` If `true`, the combobox will be opened when space is pressed.
`pattern`	-	`RegExp` The pattern used to check the input element.
`placeholder`	-	`string` The placeholder for color picker.
`placement`	`"end-start"`	`Direction` The placement of the popper relative to its reference.
`platform`	-	`Platform` Custom or extended platform object.
`preventOverflow`	`true`	`boolean` If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
`readOnly`	`false`	`boolean` If `true`, the combobox will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`rootProps`	-	`InputGroup.RootProps` Props for root element.
`saturationSliderProps`	-	`ColorSelectorSaturationSliderProps` Props for the saturation slider.
`selectorProps`	-	`ColorSelector.RootProps` Props for the selector component.
`startElementProps`	-	`InputGroup.ElementProps` The props for the start element.
`strategy`	`"absolute"`	`Strategy` The CSS positioning strategy to use.
`transferFocus`	`true`	`boolean` If `true`, the focus will be transferred to the popover content when the tab key is pressed.
`value`	-	`string` The value of the color picker.
`whileElementsMounted`	-	`(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void` A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`).
`withColorSwatch`	`true`	`boolean` If `true`, the color swatch component will be displayed.
`withEyeDropper`	`true`	`boolean` If `true`, the eye dropper component will be displayed.

アクセシビリティ

ColorPickerは、アクセシビリティに関してWAI-ARIA - Combobox Patternに従います。

Field.Rootを使用しない場合は、ColorPickerにaria-labelまたはaria-labelledbyを設定します。

<ColorPicker placeholder="#4387f4" aria-label="Pick color" />

<VStack gap="sm">
  <Text as="h3" id="label">
    Pick Color
  </Text>

  <ColorPicker placeholder="#4387f4" aria-labelledby="label" />
</VStack>

キー	説明	状態
`Tab`	フォーカスがカラーピッカーに移動するとダイアログを開きます。	`openOnFocus={true}`
`Escape`	ダイアログを閉じます。	`closeOnEsc={true}`
`ArrowRight`, `ArrowUp`	スライダー内である場合は`step`の値に基づいて値を増加します。	-
`ArrowLeft`, `ArrowDown`	スライダー内である場合は`step`の値に基づいて値を減少します。	-
`Home`	`HueSlider`または`AlphaSlider`内である場合は`min`の値を設定します。	-
`End`	`HueSlider`または`AlphaSlider`内である場合は`max`の値を設定します。	-
`PageUp`	`HueSlider`または`AlphaSlider`内である場合は`min`と`max`の値に基づいて値を増加します。	-
`PageDown`	`HueSlider`または`AlphaSlider`内である場合は`min`と`max`の値に基づいて値を減少します。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`ColorPickerField`	`role="combobox"`	コンボボックスであることを示します。
	`aria-controls`	ダイアログが開いている場合は関連した`ColorPickerContent`の`id`を設定し、閉じている場合は`undefined`を設定します。
	`aria-describedby`	`ColorPicker`が`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-disabled`	`disabled`または`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-expanded`	ダイアログが開いている場合は`"true"`を設定し、閉じている場合は`"false"`を設定します。
	`aria-haspopup="dialog"`	ダイアログが存在することを示します。
	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。
`ColorPickerEyeDropper`	`role="button"`	ボタンであることを示します。
	`aria-disabled`	`disabled`または`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-label`	`"色を選択する"`を設定します。
`ColorPickerContent`	`role="dialog"`	ダイアログであることを示します。
`ColorPickerColorSwatch`	`role="img"`	画像であることを示します。
	`aria-label`	現在の値を設定します。
	`aria-roledescription`	`"color swatch"`を設定します。
`SaturationSlider.Thumb`	`role="slider"`	スライダーであることを示します。
	`aria-label`	`"彩度と明度のつまみ"`を設定します。
	`aria-roledescription`	`"2D slider"`を設定します。
	`aria-valuemin`	`min`の値を設定します。デフォルトは`0`です。
	`aria-valuemax`	`max`の値を設定します。デフォルトは`100`です。
	`aria-valuenow`	現在の値を設定します。
	`aria-valuetext`	`"彩度 18%, 明度 18%"`のように、現在の値を設定します。
`HueSlider.Thumb`	`role="slider"`	スライダーであることを示します。
	`aria-label`	`"スライダーのつまみ"`を設定します。
	`aria-orientation`	`orientation`の値に基づいて`"horizontal"`または`"vertical"`を設定します。デフォルトは`"horizontal"`です。
	`aria-valuemin`	`min`の値を設定します。デフォルトは`0`です。
	`aria-valuemax`	`max`の値を設定します。デフォルトは`360`です。
	`aria-valuenow`	現在の値を設定します。
	`aria-valuetext`	`"18°, 赤"`のように、現在の値を設定します。
`AlphaSlider.Thumb`	`role="slider"`	スライダーであることを示します。
	`aria-label`	`"スライダーのつまみ"`を設定します。
	`aria-orientation`	`orientation`の値に基づいて`"horizontal"`または`"vertical"`を設定します。デフォルトは`"horizontal"`です。
	`aria-valuemin`	`min`の値を設定します。デフォルトは`0`です。
	`aria-valuemax`	`max`の値を設定します。デフォルトは`1`です。
	`aria-valuenow`	現在の値を設定します。
	`aria-valuetext`	`"18%"`のように、現在の値を設定します。

類似のコンポーネント

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

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

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

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

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

Selectは、ユーザーがオプションのリストから値を選択するために使用されるコンポーネントです。

使用しているコンポーネント・フック

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

NativeSelectは、ユーザーがオプションのリストから1つの値を選択するために使用されるコンポーネントです。ブラウザ（ユーザーエージェント）によって提供されるネイティブなドロップダウンリストを表示します。

ColorSwatchは、色の見本を表示するコンポーネントです。

Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

Popoverは、要素の周りにフローティングして情報を表示するコンポーネントです。

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

Groupは、複数の要素をまとめて扱うためのコンポーネントです。

Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。

Fieldは、フォーム要素に、ラベル、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。

useEyeDropperは、スポイトツールを起動し、色を取得するためのカスタムフックです。