Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

ColorPicker

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

Source@yamada-ui/color-picker

Props

ColorPickerProps

allowInput

Description

If true, allows input.

Type

boolean

Default

true

alphaSliderProps

Description

Props for the alpha slider component.

Type

Omit<AlphaSliderProps, "defaultValue" | "value">

alphaSliderRef

Description

Ref for the alpha slider component.

Type

type ONLY_FOR_FORMAT = | ((instance: HTMLInputElement | null) => void) | MutableRefObject<HTMLInputElement | null>

animation

Description

The animation of the popover.

Type

"bottom" | "left" | "right" | "scale" | "top" | "none"

Default

'scale'

boundary

Description

The boundary area for the popper. Used within the preventOverflow modifier.

Type

HTMLElement | "clippingParents" | "scrollParent"

Default

'clippingParents'

channelProps

Description

Props for the chancel component.

Type

Omit<ColorSelectorChannelProps, "channelLabel">

channelsProps

Description

Props for the channels component.

Type

ColorSelectorChannelsProps

closeDelay

Description

The number of delay time to close.

Type

number

Default

200

closeOnBlur

Description

If true, the popover will close when you blur out it by clicking outside or tabbing out.

Type

boolean

Default

true

closeOnEsc

Description

If true, the popover will close when you hit the Esc key.

Type

boolean

Default

true

closeOnSelectSwatch

Description

If true, the color swatch will be closed when value is selected.

Type

boolean

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

colorSelectorColorScheme

Description

ColorScheme for the color selector component.

Type

ThemeColorScheme

colorSelectorProps

Description

Props for color selector component.

Type

ColorSelectorProps

colorSelectorSize

Description

Size for the color selector component.

Type

UIValue<"lg" | "md" | "sm" | ({} & string) | "full">

colorSelectorVariant

Description

Variant for the color selector component.

Type

UIValue<{} & string>

containerProps

Description

Props for color picker container element.

Type

Omit<HTMLUIProps, "children">

defaultColor

Description

The initial value of the color selector.

Type

string

defaultIsOpen

Deprecated

Description

If true, the popover will be initially opened.

Deprecated

Use defaultOpen instead

Type

boolean

defaultOpen

Description

If true, the popover will be initially opened.

Type

boolean

defaultValue

Description

The initial value of the color selector.

Type

string

duration

Description

The animation duration.

Type

number | MotionLifecycleProps<number>

errorBorderColor

Description

The border color when the input is invalid.

Type

string

eventListeners

Description

If provided, determines whether the popper will reposition itself on scroll and resize of the window.

Type

type ONLY_FOR_FORMAT = | boolean | { resize?: boolean | undefined; scroll?: boolean | undefined }

Default

true

eyeDropperProps

Description

Props for color eye dropper component.

Type

ColorPickerEyeDropperProps

fallbackValue

Description

The fallback value returned when color determination fails.

Type

string

fieldProps

Description

Props for color picker field element.

Type

Omit<ColorPickerFieldProps, "children" | "inputProps">

flip

Description

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

Type

boolean

Default

true

focusBorderColor

Description

The border color when the input is focused.

Type

string

format

Description

Color format. For example, hex, rgba, etc.

Type

ColorFormat

Default

hexa

formatInput

Description

A callback function to format the input entered.

Type

(value: string) => string

gutter

Description

The distance or margin between the reference and popper. It is used internally to create an offset modifier.

Type

UIValue<number>

Default

8

hueSliderProps

Description

Props for the hue slider component.

Type

Omit<HueSliderProps, "defaultValue" | "value">

hueSliderRef

Description

Ref for the hue slider component.

Type

type ONLY_FOR_FORMAT = | ((instance: HTMLInputElement | null) => void) | MutableRefObject<HTMLInputElement | null>

inputProps

Description

Props for color picker input element.

Type

HTMLUIProps<"input">

invalid

Description

If true, the form control will be invalid.

Type

boolean

Default

false

isDisabled

Deprecated

Description

If true, the form control will be disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

isInvalid

Deprecated

Description

If true, the form control will be invalid.

Deprecated

Use invalid instead.

Type

boolean

Default

false

isLazy

Deprecated

Description

If true, the PopoverContent rendering will be deferred until the popover is open.

Deprecated

Use lazy instead

Type

boolean

Default

false

isOpen

Deprecated

Description

If true, the popover will be opened.

Deprecated

Use open instead

Type

boolean

isReadOnly

Deprecated

Description

If true, the form control will be readonly.

Deprecated

Use readOnly instead.

Type

boolean

Default

false

isRequired

Deprecated

Description

If true, the form control will be required.

Deprecated

Use required instead.

Type

boolean

Default

false

lazy

Description

If true, the PopoverContent rendering will be deferred until the popover is open.

Type

boolean

Default

false

lazyBehavior

Description

The lazy behavior of popover's content when not visible. Only works when lazy={true} - unmount: The popover's content is always unmounted when not open. - keepMounted: The popover's content initially unmounted, but stays mounted when popover is open.

Type

LazyMode

Default

'unmount'

matchWidth

Description

If true, the popper will match the width of the reference at all times. It's useful for autocomplete, date-picker and select patterns.

Type

boolean

Default

false

modifiers

Description

Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.

Type

Partial<Modifier<string, any>>[]

Docs

https://popper.js.org/docs/v2/modifiers/

offset

Description

The main and cross-axis offset to displace popper element from its reference element.

Type

[number, number]

onChange

Description

Function called whenever the color selector value changes.

Type

(value: string) => void

onChangeEnd

Description

Function called when the user is done selecting a new value.

Type

(value: string) => void

onChangeStart

Description

Function called when the user starts selecting a new value.

Type

(value: string) => void

onClose

Description

Callback fired when the popover closes.

Type

() => void

onOpen

Description

Callback fired when the popover opens.

Type

() => void

onSwatchClick

Description

Function called whenever the color swatch click.

Type

(value: string) => void

open

Description

If true, the popover will be opened.

Type

boolean

openDelay

Description

The number of delay time to open.

Type

number

Default

200

placement

Description

The placement of the popper relative to its reference.

Type

UIValue<Placement>

Default

'bottom'

portalProps

Description

Props to be forwarded to the portal component.

Type

Omit<PortalProps, "children">

Default

'{ disabled: true }'

preventOverflow

Description

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

Type

boolean

Default

true

saturationSliderProps

Description

Props for the saturation slider component.

Type

Omit<SaturationSliderProps, "defaultValue" | "value">

saturationSliderRef

Description

Ref for the saturation slider component.

Type

type ONLY_FOR_FORMAT = | ((instance: HTMLInputElement | null) => void) | MutableRefObject<HTMLInputElement | null>

size

Description

The size of the ColorPicker.

Type

"xs" | "sm" | "md" | "lg" | "xl"

Default

"md"

strategy

Description

The CSS positioning strategy to use.

Type

"fixed" | "absolute"

Default

'absolute'

swatches

Description

An array of colors in one of the supported formats. Used to render swatches list below the color selector.

Type

string[]

swatchesColumns

Description

Number of swatches grid columns.

Type

UIValue<number>

Default

7

swatchesLabel

Description

The swatches label to use.

Type

type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal

swatchesProps

Description

Props for the swatches component.

Type

ColorSelectorSwatchesProps

swatchProps

Description

Props for color swatch component.

Type

ColorPickerSwatchProps

value

Description

The value of the color selector.

Type

string

variant

Description

The variant of the ColorPicker.

Type

"filled" | "flushed" | "outline" | "unstyled"

Default

"outline"

withChannel

Description

If true, display the channels component.

Type

boolean

Default

true

withColorSelectorEyeDropper

Description

If true display the eye dropper component.

Type

boolean

Default

false

withEyeDropper

Description

If true, display the eye dropper component.

Type

boolean

Default

true

withPicker

Description

If true, display the saturation, hue, alpha, channels and eye dropper component.

Type

boolean

Default

true

withResult

Description

If true, display the result component.

Type

boolean

Default

false

withSwatch

Description

If true, display the color swatch component.

Type

boolean

Default

true

Edit this page on GitHub

PreviousYearPickerNextFileInput