Field.ColorPicker

Field.ColorPicker는 Field 안의 버튼으로, 필드 한 줄 높이의 색 견본으로 그려지고 그 색으로 채워집니다. Popover 안에 ColorPicker를 엽니다. 값은 #rrggbb 문자열이고, onValueChange는 끌거나 키로 바꾸는 동안 새 색을 하나씩 받습니다.

const id = useId();

<Field.Group>
  <Label.Root htmlFor={id}>Accent</Label.Root>
  <Field.Root id={id}>
    <Field.ColorPicker
      value={color}
      onValueChange={(next) => {
        setColor(next);
        setText(next);
      }}
    />
    <Field.TextInput
      value={text}
      onChange={() => undefined}
      onValueChange={(next) => {
        setText(next);
        const hex = normalizeHex(next);
        if (hex) setColor(hex);
      }}
      onBlur={() => setText(color)}
      spellCheck={false}
    />
  </Field.Root>
</Field.Group>

여기서는 같은 필드 안의 Field.TextInput으로 색을 입력할 수도 있습니다. 둘은 상태를 함께 씁니다. 고른 색이 텍스트를 바꾸고, normalizeHex는 입력한 텍스트가 색이면 색으로 바꿉니다. Field.TextInput이 옆에 있으면 그 입력이 필드의 컨트롤입니다. 그 입력이 필드의 id와 설명을 받고, 필드의 다른 곳을 누르면 그 입력에 포커스가 갑니다. Field.Textarea, Field.ChipInput, Field.Select, useField로 연결한 컨트롤도 같은 방식으로 id와 설명을 받습니다. 견본은 옆에 숨은 텍스트 입력을 통해, 자신의 name이 있으면 그 이름으로 폼에 색을 보냅니다. 없으면 필드의 name으로 보내는데, useField가 이 컨트롤 중 하나에 그 name을 주었으면 보내지 않습니다. 자신의 name이 없는 Field.TextInput이 그런 경우입니다.

혼자 있으면 Field.ColorPicker가 필드의 컨트롤이고, 필드의 다른 곳을 누르면 선택기가 열리며, 필드 너비는 견본 너비와 같습니다. 값을 텍스트로 보이려면 뒤에 Field.Affix를 두세요.

선택기는 open과 onOpenChange, 또는 defaultOpen으로 열고 닫습니다. onOpenChange는 닫힌 이유 'escape', 'outside', 'trigger', 또는 필드가 비활성화될 때의 'disabled'를 받습니다. 열리면 선택기가 포커스를 가져가고, 그 안에서 Escape를 누르면 선택기를 닫고 포커스를 견본으로 돌려줍니다.

접근성을 지키는 조합

Todae가 맡는 것: 혼자 있으면 버튼은 Field.Root에서 id, aria-label, aria-labelledby, aria-describedby를 받고, Root나 바깥 Fieldset에서 네이티브 disabled와 aria-invalid를 받습니다. 위의 컨트롤 중 하나가 옆에 있으면 그 컨트롤이 대신 id와 aria-describedby를 받고, 버튼은 disabled와 aria-invalid를 유지하며, 자신의 aria-label이 없으면 StringsProvider의 colorPicker 문자열로 이름이 붙습니다. aria-haspopup="dialog"와 aria-expanded를 받고, 선택기가 열려 있는 동안에는 aria-controls도 받습니다. 팝오버는 StringsProvider의 colorPicker 문자열로 이름이 붙는 role="dialog"이고, 그 안의 입력은 ColorPicker와 같은 이름과 키를 가집니다.

직접 제공할 것: 이름. htmlFor가 Root id인 Label이나, Root의 aria-label / aria-labelledby입니다.

주의할 점: 견본의 이름은 색이 아니므로, 스크린 리더는 버튼에서 값을 듣지 못합니다. 값을 읽어야 한다면 Field.TextInput이나 Field.Affix에 텍스트로 보이세요.

언제 쓰나요

Field.ColorPicker

언제: 브랜드나 강조 색처럼 폼에서 색 하나를 고를 때.

쓰지 않을 때: oklch()처럼 다른 형식의 색 → Field.TextInput. 필드 없이 화면에 펼쳐 놓은 선택기 → ColorPicker. 정해진 색 몇 가지 → RadioGroup.

Props