ColorField

ColorField is a form field that combines a text input with a color swatch that opens a ColorPicker within a Popover.

The component uses HSL internally but hex values should be used when providing a color value and handling the onChange. Two utility methods are exposed by Kyber Forms to help with converting between color formats: hexToHsl and hslToHex.

For basic usage see ColorPicker.

Result

Loading...

Live Editor

function Example() {
	const [value, setValue] = useState('#663399');

	return (
		<>
			<ColorField label="Color" value={value} onChange={setValue} />
		</>
	);
}

ColorField supports being used within a Form component.

Result

Loading...

Live Editor

function Example() {
	return (
		<Form
			initialValues={{
				'header-text': '#663399',
				'primary-background': '#996633',
				'footer-background': '#339966',
			}}
			onSubmit={(values, { setSubmitting }) => {
				console.log(values);
				setSubmitting(false);
			}}
		>
			<FormField>
				<ColorField name="header-text" label="Header Text" />
			</FormField>
			<FormField>
				<ColorField name="primary-background" label="Primary Background" />
			</FormField>
			<FormField>
				<ColorField name="footer-background" label="Footer Background" />
			</FormField>
		</Form>
	);
}

Manually updating color

Result

Loading...

Live Editor

function Example() {
	const [value, setValue] = useState('#663399');
	const colorFieldRef = useRef();

	return (
		<>
			<ColorField
				ref={colorFieldRef}
				name="header-text"
				label="Header Text"
				value={value}
				onChange={setValue}
			/>

			<Button
				className="k-mt-2"
				onClick={() => {
					setValue('#000000');
				}}
			>
				Set to Black
			</Button>
		</>
	);
}

Props