ColorPicker

色を #rrggbb で選ぶ入力欄。色相・彩度・明度のつまみと見本から選べる

インポート

ts
import { ColorPicker } from '@k8ordo/ui';

使い方

値を運ぶのは name を持つテキスト欄です。つまみや見本で選んだ色はその欄に書き込まれ、打ち込んだときと同じく input イベントで知らされます。打っている間は 6 桁そろって初めて色として扱い、離れるときと Enter で小文字の #rrggbb にそろえます（3 桁の #f80 もそこで広げます）。

tsx
<ColorPicker aria-label="Accent color" defaultValue="#0d9488" name="accent" />

見本

見本はそれぞれ label を名前に持つトグルボタンで、いまの色と同じものが押された状態になります。

tsx
const swatches = [
  { value: '#0d9488', label: 'Teal' },
  { value: '#2563eb', label: 'Blue' },
  { value: '#f97316', label: 'Orange' },
  { value: '#e11d48', label: 'Rose' },
  { value: '#171717', label: 'Black' },
];

<ColorPicker
  aria-label="Accent color"
  defaultValue="#f97316"
  swatches={swatches}
/>

制御モード

onChange は #rrggbb を受け取ります。欄を空にしたときは '' です。

value: #2563eb

tsx
const [color, setColor] = useState('#2563eb');

<ColorPicker
  aria-label="Accent color"
  onChange={setColor}
  swatches={swatches}
  value={color}
/>

無効

tsx
<ColorPicker aria-label="Accent color" defaultValue="#0d9488" disabled />

@k8ordo/form と使う

formFields が導いた input をそのまま spread できます。スキーマの .regex() は pattern として届き、組み込みの #[0-9a-fA-F]{6} を置き換えます。つまみや見本での変更も、フォームには打ち込んだときと同じように伝わります（変更の有無、ルール、エラーの解除、reset）。

tsx
// schema.ts
export const themeSchema = z.object({
  accent: z.string().regex(/^#[0-9a-f]{6}$/),
});

// theme-form.tsx
const accent = form.field('accent');

<FormControl
  errorText={accent.error}
  invalid={accent.invalid}
  label="Accent color"
  required={accent.required}
  renderInput={(props) => <ColorPicker {...props} {...accent.input} />}
/>

Props

defaultValue?
Type: string
Default: -
invalid?
Type: boolean
Default: false
onChange?
Type: (value: string) => void
Default: -
ref?
Type: Ref<HTMLInputElement>
Default: -
swatches?
Type: readonly ColorPickerSwatch[]
Default: -
type?
Type: string
Default: -
value?
Type: string
Default: -

型ベース（内部で固定する一部attrsは除外）: InputHTMLAttributes<HTMLInputElement>

このコンポーネントが描画する文言（ラベルやプレースホルダーなど）は、propsで指定しないとき文言辞書から解決されます。差し替え方は次を参照してください: i18n

Components