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> <ColorPicker variant="outline" placeholder="outline" /> <ColorPicker variant="filled" placeholder="filled" /> <ColorPicker variant="flushed" placeholder="flushed" /> <ColorPicker variant="unstyled" placeholder="unstyled" /> </VStack>
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>
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>
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 isInvalid errorBorderColor="orange.500" placeholder="custom border color" /> </VStack>
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>
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>
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 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> )
Edit this page on GitHub