---
title: ColorPicker
description: "`ColorPicker`は、ユーザーが色を選択したり任意の色の値を入力するために使用されるコンポーネントです。"
links:
- source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/color-picker
- storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-colorpicker--basic
---
```tsx
```
## 使い方
```tsx
import { ColorPicker } from "@yamada-ui/react"
```
```tsx
import { ColorPicker } from "@/components/ui"
```
```tsx
import { ColorPicker } from "@workspaces/ui"
```
```tsx
```
### バリアントを変更する
```tsx
{(variant, index) => (
)}
```
### サイズを変更する
```tsx preview
{(size, index) => (
)}
```
### カラースキームを変更する
```tsx
{(colorScheme, index) => (
)}
```
### デフォルトの値を設定する
デフォルトの値を設定する場合は、`defaultValue`に値を設定します。
```tsx
```
### アルファ値を設定する
アルファ値を設定する場合は、`defaultValue`にアルファ値を含む値を設定するか、`format`に`"hexa"`や`"hsla"`などを設定します。
```tsx
```
### フォーマットを変更する
フォーマットを変更する場合は、`format`に値を設定します。デフォルトでは、`value`または`defaultValue`の文字列からフォーマットを判定しています。
```tsx
```
### 入力値を制限する
入力値を制限する場合は、`pattern`に正規表現を設定します。
```tsx
```
### 入力値をフォーマットする
入力値をフォーマットする場合は、`formatInput`に関数を設定します。
```tsx
value.toUpperCase()}
/>
```
### 候補を表示する
候補を表示する場合は、`colorSwatches`に配列を設定します。
```tsx
```
### 候補の列を変更する
候補の列を変更する場合は、`colorSwatchGroupColumns`に数値を設定します。
```tsx
```
### オフセットを変更する
オフセットを変更する場合は、`gutter`または`offset`に値を設定します。
```tsx
```
### アニメーションを変更する
アニメーションを変更する場合は、`animationScheme`に`"block-start"`や`"inline-end"`などを設定します。デフォルトでは、`"scale"`が設定されています。
```tsx
```
### 表示位置を変更する
表示位置を変更するには、`placement`に`end`や`start-center`などを設定します。デフォルトでは、`end-start`が設定されています。
```tsx
```
### スクロールをブロックする
スクロールをブロックするには、`blockScrollOnMount`を`true`に設定します。
```tsx
```
### スクロール時にドロップダウンを閉じる
スクロール時にドロップダウンを閉じる場合は、`closeOnScroll`を`true`に設定します。
```tsx
```
### 変更時にドロップダウンを開くイベントをハンドルする
変更時にドロップダウンを開くイベントをハンドルする場合は、`openOnChange`に関数を設定します。
```tsx
ev.target.value.length > 1}
/>
```
### 変更時にドロップダウンを閉じるイベントをハンドルする
変更時にドロップダウンを閉じるイベントをハンドルする場合は、`closeOnChange`に関数を設定します。
```tsx
!ev.target.value.length}
/>
```
### フォーカス時にドロップダウンを開かない
フォーカス時にドロップダウンを開かない場合は、`openOnFocus`を`false`に設定します。
```tsx
```
### クリック時にドロップダウンを開かない
クリック時にドロップダウンを開かない場合は、`openOnClick`を`false`に設定します。
```tsx
```
### フォーカスが外れた場合に閉じない
フォーカスが外れた場合にドロップダウンを閉じない場合は、`closeOnBlur`を`false`に設定します。
```tsx
```
### ESCキーが入力された時にドロップダウンを閉じない
ESCキーが入力された時にドロップダウンを閉じない場合は、`closeOnEsc`を`false`に設定します。
```tsx
```
### 入力を許可しない
入力を許可しない場合は、`allowInput`を`false`に設定します。
```tsx
```
### 形を変える
```tsx
{(shape, index) => (
)}
```
### 無効にする
無効にする場合は、`disabled`を`true`に設定します。
```tsx
{(variant, index) => (
)}
```
### 読み取り専用にする
読み取り専用にする場合は、`readOnly`を`true`に設定します。
```tsx
{(variant, index) => (
)}
```
### 無効な入力にする
無効な入力にする場合は、`invalid`を`true`に設定します。
```tsx
{(variant, index) => (
)}
```
### ボーダーの色を変更する
ボーダーの色を変更する場合は、`focusBorderColor`または`errorBorderColor`に値を設定します。
```tsx
```
### 制御する
```tsx
const [value, onChange] = useState("#4387f4")
return
```
## Props
| Prop | Default | Type | Description |
| ---------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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) => 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> \| Iterable \| 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` | 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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: Platform; strategy: Strategy; initialPlacement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<...>; } \| null \| undefined)[]` | 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` | Callback invoked to close the element. |
| `onInputChange` | - | `(ev: ChangeEvent) => void` | The callback invoked when input value state changes. |
| `onOpen` | - | `() => void \| Promise` | Callback invoked to open the element. |
| `open` | - | `boolean` | If `true`, the element will be opened. |
| `openOnChange` | `true` | `((ev: ChangeEvent) => 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. |
## アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。