Components

Color Picker

ColorPicker, dressed in the paper-and-ink system: a seal-sized swatch on the paper, opening into an area and channel sliders where pigment is picked. The parts — Root, Label, Control, Trigger, Positioner, Content, Area, AreaThumb, AreaBackground, ValueText, ValueSwatch, ChannelSlider, ChannelSliderLabel, ChannelSliderTrack, ChannelSliderThumb, ChannelSliderValueText, ChannelInput, TransparencyGrid, SwatchGroup, SwatchTrigger, SwatchIndicator, Swatch, EyeDropperTrigger, FormatTrigger, FormatSelect, HiddenInput, Context.

#Basic usage

color-picker/basic Vue React

Ink color

color-picker/basic.vue

<script setup lang="ts">
import { parseColor } from "@ark-ui/vue/color-picker";
import { ColorPicker } from "@bysages/vue";
</script>

<template>
  <ColorPicker.Root :default-value="parseColor('#1e5aa8')">
    <ColorPicker.Label>Ink color</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ChannelInput channel="hex" />
      <ColorPicker.Trigger>
        <ColorPicker.ValueSwatch />
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content>
        <ColorPicker.Area>
          <ColorPicker.AreaBackground />
          <ColorPicker.AreaThumb />
        </ColorPicker.Area>
        <ColorPicker.ChannelSlider channel="hue">
          <ColorPicker.ChannelSliderTrack>
            <ColorPicker.ChannelSliderThumb />
          </ColorPicker.ChannelSliderTrack>
        </ColorPicker.ChannelSlider>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
  </ColorPicker.Root>
</template>

#Props

#AreaBackground

A styled part — no props of its own; it takes the anatomy's shared styling.

#AreaThumb

A styled part — no props of its own; it takes the anatomy's shared styling.

#Area

Prop	Type	Default	Description
`xChannel`	`ColorChannel \| undefined`		—
`yChannel`	`ColorChannel \| undefined`		—

#ChannelInput

Prop	Type	Default	Description
`channel`	`ExtendedColorChannel`		—
`orientation`	`Orientation \| undefined`		—

#ChannelSliderLabel

A styled part — no props of its own; it takes the anatomy's shared styling.

#ChannelSliderThumb

A styled part — no props of its own; it takes the anatomy's shared styling.

#ChannelSliderTrack

A styled part — no props of its own; it takes the anatomy's shared styling.

#ChannelSliderValueText

A styled part — no props of its own; it takes the anatomy's shared styling.

#ChannelSlider

Prop	Type	Default	Description
`channel`	`ColorChannel`		—
`orientation`	`Orientation \| undefined`		—

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#EyeDropperTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#FormatSelect

A styled part — no props of its own; it takes the anatomy's shared styling.

#FormatTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the swatch seal.
`closeOnSelect`	`boolean`	`false`	Whether to close the color picker when a swatch is selected
`defaultFormat`	`colorPicker.ColorFormat`	`"rgba"`	The initial color format when rendered. Use when you don't need to control the color format of the color picker.
`defaultOpen`	`boolean`		The initial open state of the color picker when rendered. Use when you don't need to control the open state of the color picker.
`defaultValue`	`colorPicker.Color`	`#000000`	The initial color value when rendered. Use when you don't need to control the color value of the color picker.
`disabled`	`boolean`		Whether the color picker is disabled
`format`	`colorPicker.ColorFormat`		The controlled color format to use
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; control: string; trigger: string; label: string; input: string; hiddenInput: string; content: string; area: string; areaGradient: string; positioner: string; formatSelect: string; areaThumb: string; channelInput(id: string): string; channelSliderTrack(id: colorPicker.ColorChannel): string; channelSliderThumb(id: colorPicker.ColorChannel): string; }>`		The ids of the elements in the color picker. Useful for composition.
`initialFocusEl`	`() => HTMLElement \| null`		The initial focus element when the color picker is opened.
`inline`	`boolean`		Whether the color picker is inline
`invalid`	`boolean`		Whether the color picker is invalid
`modelValue`	`colorPicker.Color`		The v-model value of the color picker
`name`	`string`		The name for the form input
`open`	`boolean`		The controlled open state of the color picker
`openAutoFocus`	`boolean`	`true`	Whether to auto focus the color picker when it is opened
`positioning`	`colorPicker.PositioningOptions`		The positioning options for the color picker
`readOnly`	`boolean`		Whether the color picker is read-only
`required`	`boolean`		Whether the color picker is required

#SwatchGroup

A styled part — no props of its own; it takes the anatomy's shared styling.

#SwatchIndicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#SwatchTrigger

Prop	Type	Default	Description
`disabled`	`boolean \| undefined`		Whether the swatch trigger is disabled
`value`	`string \| Color`		The color value

#Swatch

Prop	Type	Default	Description
`respectAlpha`	`boolean \| undefined`		Whether to include the alpha channel in the color
`value`	`string \| Color`		The color value

#TransparencyGrid

Prop	Type	Default	Description
`size`	`string \| undefined`		—

#Trigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#ValueSwatch

A styled part — no props of its own; it takes the anatomy's shared styling.

#ValueText

Prop	Type	Default	Description
`format`	`ColorStringFormat`		—

#View

Prop	Type	Default	Description
`format`	`ColorFormat`		—