ColorPicker
ColorPicker is a component used by the user to select a color or enter an arbitrary color value.
Import
import { ColorPicker } from "@yamada-ui/react"
Usage
Editable example
<ColorPicker placeholder="#4387f4" />
To allow selection of transparency, you need to set an alpha value in value or defaultValue, or set format to hexa, rgba, hsla.
Change Variant
Editable example
<VStack> <For each={["outline", "filled", "flushed", "unstyled"]}> {(variant, index) => ( <ColorPicker key={index} variant={variant} placeholder={variant} /> )} </For> </VStack>
Change Size
Editable example
<VStack> <For each={[ { placeholder: "extra small size", size: "xs", }, { placeholder: "small size", size: "sm", }, { placeholder: "medium size", size: "md", }, { placeholder: "large size", size: "lg", }, ]} > {({ placeholder, size }, index) => ( <ColorPicker key={index} placeholder={placeholder} size={size} /> )} </For> </VStack>
To change the size of the selector, set calendarSize.
Editable example
<VStack> <For each={[ { placeholder: "small size", colorSelectorSize: "sm", }, { placeholder: "medium size", colorSelectorSize: "md", }, { placeholder: "large size", colorSelectorSize: "lg", }, { placeholder: "full size", colorSelectorSize: "full", }, ]} > {({ placeholder, colorSelectorSize }, index) => ( <ColorPicker key={index} placeholder={placeholder} colorSelectorSize={colorSelectorSize} /> )} </For> </VStack>
Set Default Value
To set a default value, set a string in defaultValue.
Editable example
<ColorPicker defaultValue="#4387f4ff" />
Set Default Color
To set a default color, set a string in defaultColor.
Editable example
<ColorPicker placeholder="#4387f4ff" defaultColor="#4387f4ff" />
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" />
Set Format
To set the format, set format to hex, hexa, rgb, rgba, hsl, hsla.
By default, the format is determined by the string in value or defaultValue.
Editable example
<ColorPicker defaultValue="hsla(240, 100%, 50%, 1)" format="hsla" />
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()} />
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", ]} />
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 />
Disallow Input
To disallow input, set allowInput to false.
Editable example
<ColorPicker placeholder="#000000" allowInput={false} />
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" />
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>
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 invalid errorBorderColor="orange.500" placeholder="custom border color" /> </VStack>
Disable
To disable, set disabled to true.
Editable example
<VStack> <For each={["outline", "filled", "flushed"]}> {(variant, index) => ( <ColorPicker disabled key={index} variant={variant} placeholder={variant} /> )} </For> </VStack>
Make Read-Only
To make read-only, set readOnly to true.
Editable example
<VStack> <For each={["outline", "filled", "flushed"]}> {(variant, index) => ( <ColorPicker readOnly key={index} variant={variant} placeholder={variant} /> )} </For> </VStack>
Customize Layout
Editable example
<ColorPicker placeholder="#000000" withSwatch={false} />
Editable example
<ColorPicker placeholder="#000000" withEyeDropper={false} />
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 />
Editable example
<ColorPicker placeholder="#000000" withChannel={false} />
Editable example
<ColorPicker placeholder="#000000" withColorSelectorEyeDropper />
Editable example
<ColorPicker placeholder="#000000" withResult />
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>
Control
Editable example
const [value, onChange] = useState<string>("#4387f4ff") return <ColorPicker value={value} onChange={onChange} />
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 invalid={!!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> )
Edit this page on GitHub