新着
カラーピッカーSwatch Grid Picker
A radiogroup of preset colour swatches where the choice is marked by a ring and a check, not colour alone.
#color#swatch#grid
3 個のフレームワーク初級
Loading…
A single native range painted with the hue wheel that reports the resolved hex.
<!--
A single native range whose track is painted with the hue wheel as a CSS gradient.
The aria-label carries the resolved hex so the value is announced, not just the
raw 0-360 the slider reports. Static snapshot - see the React / TypeScript tabs.
-->
<div class="w-full max-w-xs">
<div class="mb-3 flex items-center gap-3">
<span class="h-9 w-9 shrink-0 rounded-lg border border-black/10 dark:border-white/15" style="background-color:#00a2ff"></span>
<span class="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100">#00a2ff</span>
<span class="ml-auto text-sm text-gray-500 dark:text-gray-400">Hue 200°</span>
</div>
<input type="range" min="0" max="360" value="200" aria-label="Hue, #00a2ff"
class="h-3 w-full cursor-pointer appearance-none rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-600 focus-visible:ring-offset-white dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950"
style="background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)" />
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
hue | number | - | Hue |
onChange | (hue: number) => void | - | On change |
label | string | 'Hue' | 読み込み中に読み上げられるアクセシブルなラベル。 |
Control it with the `hue` prop or let it self-manage. The 0-360 value is converted to hex for both the swatch and the slider`s `aria-label`, so the announced value is a colour, not a raw number.