ColorPicker

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

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

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

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

Copied!

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

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

Copied!

キーボード操作

キー	説明	状態
`Escape`	ダイアログを閉じます。	`closeOnEsc={true}`

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`ColorPickerField` 内部	`role="combobox"`	コンボボックスであることを示します。
	`aria-haspopup="dialog"`	ダイアログが存在することを示します。
	`aria-expanded`	ダイアログが開いている場合は`"true"`を設定し、閉じている場合は`"false"`を設定します。
	`aria-controls`	ダイアログが開いている場合は関連した`ColorSelector`の`id`を設定し、閉じている場合は`undefined`を設定します。
	`aria-readonly`	`isReadOnly`が設定されている場合は`"true"`を設定します。
	`aria-disabled`	`isDisabled`が設定されている場合は`"true"`を設定します。
	`aria-invalid`	`isInvalid`が設定されている場合は`"true"`を設定します。
	`aria-required`	`isRequired`が設定されている場合は`"true"`を設定します。
`ColorPickerSwatch` 内部	`role="img"`	画像であることを示します。
	`aria-roledescription`	`"color swatch"`を設定します。
	`aria-label`	`"#141414"`のように、現在の値を設定します。
`ColorPickerEyeDropper` 内部	`role="button"`	ボタンであることを示します。
	`aria-label`	`"Pick a color"`を設定します。
`ColorSelector` 内部	`role="dialog"`	ダイアログであることを示します。
	`id`	`ColorPickerField`と関連付けるために使用する`id`。
	`aria-hidden`	ダイアログが開いている場合は`"true"`を設定し、閉じている場合は`"false"`を設定します。
`SaturationSliderThumb` 内部	`role="slider"`	スライダーであることを示します。
	`aria-roledescription`	`"2D slider"`を設定します。
	`aria-label`	`"Saturation and brightness thumb"`を設定します。
	`aria-valuemin`	`0`の値を設定します。
	`aria-valuemax`	`100`の値を設定します。
	`aria-valuenow`	現在の値を設定します。
	`aria-valuetext`	`"saturation 0.72, brightness 0.96"`のように、現在の値を設定します。
`HueSliderThumb` 内部	`role="slider"`	スライダーであることを示します。
	`aria-label`	`"Slider thumb"`を設定します。
	`aria-valuemin`	`0`の値を設定します。
	`aria-valuemax`	`360`の値を設定します。
	`aria-valuenow`	現在の値を設定します。
	`aria-valuetext`	`"18°, Red"`のように、現在の値を設定します。
`AlphaSliderThumb` 内部	`role="slider"`	スライダーであることを示します。
	`aria-label`	`"Slider thumb"`を設定します。
	`aria-valuemin`	`0`の値を設定します。
	`aria-valuemax`	`1`の値を設定します。
	`aria-valuenow`	現在の値を設定します。
	`aria-valuetext`	`"18%"`のように、現在の値を設定します。

GitHubでこのページを編集する

前YearPicker 次FileInput