Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.3

ColorPicker

ColorPicker is a component used by the user to select a color or enter an arbitrary color value.

Source@yamada-ui/color-picker

Import

import { ColorPicker } from "@yamada-ui/react"
Copied!

Usage

Editable example

<ColorPicker placeholder="#4387f4" />
Copied!

Change Variant

Editable example

<VStack>
  <ColorPicker variant="outline" placeholder="outline" />
  <ColorPicker variant="filled" placeholder="filled" />
  <ColorPicker variant="flushed" placeholder="flushed" />
  <ColorPicker variant="unstyled" placeholder="unstyled" />
</VStack>
Copied!

Change Size

Editable example

<VStack>
  <ColorPicker placeholder="extra small size" size="xs" />
  <ColorPicker placeholder="small size" size="sm" />
  <ColorPicker placeholder="medium size" size="md" />
  <ColorPicker placeholder="large size" size="lg" />
</VStack>
Copied!

To change the size of the selector, set calendarSize.

Editable example

<VStack>
  <ColorPicker placeholder="small size" colorSelectorSize="sm" />
  <ColorPicker placeholder="medium size" colorSelectorSize="md" />
  <ColorPicker placeholder="large size" colorSelectorSize="lg" />
  <ColorPicker placeholder="full size" colorSelectorSize="full" />
</VStack>
Copied!

Set Default Value

To set a default value, set a string in defaultValue.

Editable example

<ColorPicker defaultValue="#4387f4ff" />
Copied!

Set Default Color

To set a default color, set a string in defaultColor.

Editable example

<ColorPicker placeholder="#4387f4ff" defaultColor="#4387f4ff" />
Copied!

Set Fallback Value

To set a fallback, set a string in fallbackValue. This is the value set when the color cannot be determined from the input string.

Editable example

<ColorPicker defaultValue="#00000000" fallbackValue="#00000000" />
Copied!

Set Format

To set the format, set format to hex, hexa, rgb, rgba, hsl, hsla.

Editable example

<ColorPicker defaultValue="hsla(240, 100%, 50%, 1)" format="hsla" />
Copied!

Format Input Value

To format the input value, set a callback function in formatInput.

Editable example

<ColorPicker
  format="hexa"
  placeholder="#4387F4FF"
  formatInput={(value) => value.toUpperCase()}
/>
Copied!

Display Swatches

To display swatches, set an array of strings in swatches.

Editable example

<ColorPicker
  defaultValue="#2e2e2e"
  swatchesLabel="Saved Colors"
  swatches={[
    "#2e2e2e",
    "#868e96",
    "#fa5252",
    "#e64980",
    "#be4bdb",
    "#7950f2",
    "#4c6ef5",
    "#228be6",
    "#15aabf",
    "#12b886",
    "#40c057",
    "#82c91e",
    "#fab005",
    "#fd7e14",
  ]}
/>
Copied!

Close on Selecting Swatch

To close upon selecting a swatch, set closeOnSelectSwatch to true.

Editable example

<ColorPicker
  defaultValue="#2e2e2e"
  swatchesLabel="Saved Colors"
  swatches={[
    "#2e2e2e",
    "#868e96",
    "#fa5252",
    "#e64980",
    "#be4bdb",
    "#7950f2",
    "#4c6ef5",
    "#228be6",
    "#15aabf",
    "#12b886",
    "#40c057",
    "#82c91e",
    "#fab005",
    "#fd7e14",
  ]}
  closeOnSelectSwatch
/>
Copied!

Disallow Input

To disallow input, set allowInput to false.

Editable example

<ColorPicker placeholder="#000000" allowInput={false} />
Copied!

Change Display Position

To change the display position, set placement to positions like top or left-start. By default, bottom is set.

Editable example

<ColorPicker placeholder="#000000" placement="bottom-end" />
Copied!

Change Offset

Depending on the size of the element or the situation, you may want to change the position of the tooltip. In that case, adjust the position with gutter or offset.

gutter allows you to set the difference from simple elements, and offset allows you to set [horizontal, vertical].

Editable example

<VStack>
  <ColorPicker placeholder="#000000" gutter={32} />
  <ColorPicker placeholder="#000000" offset={[16, 16]} />
</VStack>
Copied!

Change Border Color

To change the border color, set a color in focusBorderColor or errorBorderColor.

Editable example

<VStack>
  <ColorPicker focusBorderColor="green.500" placeholder="custom border color" />
  <ColorPicker
    isInvalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>
Copied!

Disable

To disable, set isDisabled to true.

Editable example

<VStack>
  <ColorPicker isDisabled variant="outline" placeholder="outline" />
  <ColorPicker isDisabled variant="filled" placeholder="filled" />
  <ColorPicker isDisabled variant="flushed" placeholder="flushed" />
</VStack>
Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

<VStack>
  <ColorPicker isReadOnly variant="outline" placeholder="outline" />
  <ColorPicker isReadOnly variant="filled" placeholder="filled" />
  <ColorPicker isReadOnly variant="flushed" placeholder="flushed" />
</VStack>
Copied!

Customize Layout

Editable example

<ColorPicker placeholder="#000000" withSwatch={false} />
Copied!

Editable example

<ColorPicker placeholder="#000000" withEyeDropper={false} />
Copied!

Editable example

<ColorPicker
  placeholder="#000000"
  withPicker={false}
  swatchesLabel="Saved Colors"
  swatches={[
    "#2e2e2e",
    "#868e96",
    "#fa5252",
    "#e64980",
    "#be4bdb",
    "#7950f2",
    "#4c6ef5",
    "#228be6",
    "#15aabf",
    "#12b886",
    "#40c057",
    "#82c91e",
    "#fab005",
    "#fd7e14",
  ]}
  closeOnSelectSwatch
/>
Copied!

Editable example

<ColorPicker placeholder="#000000" withChannel={false} />
Copied!

Editable example

<ColorPicker placeholder="#000000" withColorSelectorEyeDropper />
Copied!

Editable example

<ColorPicker placeholder="#000000" withResult />
Copied!

Add elements to a dropdown

To add elements to a dropdown, set the elements to the children property.
The children are provided with value and onClose methods, which can be used to access the internal state.

Editable example

<VStack>
  <ColorPicker placeholder="#4387f4">
    <Button>Submit</Button>
  </ColorPicker>

  <ColorPicker placeholder="#4387f4">
    {({ value, onClose }) => <Button onClick={onClose}>Submit {value}</Button>}
  </ColorPicker>
</VStack>
Copied!

Control

Editable example

const [value, onChange] = useState<string>("#4387f4ff")

return <ColorPicker value={value} onChange={onChange} />
Copied!

Use React Hook Form

Editable example

type Data = { colorPicker: string }

const defaultValues: Data = {
  colorPicker: "#4387f4ff",
}

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>({ defaultValues })

const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <FormControl
      isInvalid={!!errors.colorPicker}
      label="Pick color"
      errorMessage={errors.colorPicker ? errors.colorPicker.message : undefined}
    >
      <Controller
        name="colorPicker"
        control={control}
        render={({ field }) => <ColorPicker {...field} />}
      />
    </FormControl>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

Edit this page on GitHub

PreviousYearPickerNextFileInput