fn-design-system/components/color_input.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path, framework, has_state, props, emits, output, params

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	tested	tests	test_file_path	file_path	framework	has_state	props	emits	output	params
color_input	component	ts	ui	1.0.0	impure	ColorInput(props: ColorInputProps): JSX.Element	Selector de color con picker, swatches predefinidos y eye dropper. Soporta hex, rgb, hsl con alpha. Wrapper sobre Mantine ColorInput.	color picker input form component ui interactive mantine				false		@mantine/core	false			frontend/functions/ui/color_input.tsx	react	true	name type required description format "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla" false Formato de color a usar en el valor. Por defecto hex. name type required description swatches string[] false Lista de colores predefinidos mostrados como swatches en el picker. name type required description withEyeDropper boolean false Muestra el boton eye dropper para seleccionar color de la pantalla. name type required description withPicker boolean false Muestra el color picker interactivo. Por defecto true. name type required description value string false Valor controlado del color en el formato especificado. name type required description onChange (value: string) => void false Callback invocado cuando el color cambia. name type required description label React.ReactNode false Etiqueta del campo. name type required description placeholder string false Placeholder del input de texto. name type required description disabled boolean false Deshabilita el input. name type required description size "xs" | "sm" | "md" | "lg" | "xl" false Tamanio del componente.	onChange onChangeEnd	Componente ColorInput que renderiza input de color con picker desplegable y swatches

Ejemplo

import { ColorInput } from '@fn_library/color_input'

// Basico con hex (default)
<ColorInput
  label="Color primario"
  placeholder="#228be6"
/>

// Con swatches predefinidos
<ColorInput
  label="Color de marca"
  swatches={['#2e2e2e', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']}
  swatchesPerRow={7}
  placeholder="Elige un color"
/>

// Con rgba y eye dropper
<ColorInput
  label="Color con transparencia"
  format="rgba"
  withEyeDropper
  value="rgba(34, 139, 230, 0.5)"
  onChange={(value) => console.log(value)}
/>

Notas

Wrapper directo sobre ColorInput de Mantine v9. Hereda todas las props de Mantine sin restricciones.

El eye dropper (withEyeDropper) solo funciona en browsers que soporten la EyeDropper API (Chrome/Edge). En Firefox no aparece el boton automaticamente.

Cuando format es hex o hsl, el valor no incluye canal alpha. Para transparencia usar hexa, rgba o hsla.