ColorInput

Used to select colors from a color area.

Demo

React

Vue

Usage

React

import { ColorInput } from '@fintech-sandpit/ui/react';

const [color, setColor] = useState('#000000');

return (
  <ColorInput
    value={color}
    label="Select a color"
    onChange={setColor}
  />
);

Vue

<script setup lang="ts">
import { ColorInput } from '@fintech-sandpit/ui/vue';

const color = ref('#000000');
</script>

<template>
  <ColorInput
    v-model="color"
    label="Select a color"
  />
</template>

Props

React

Name	Type	Default	Description
value	Color	—	The value of the password field
defaultValue	Color	—	The default value of the password field
size	Size	md	The size of the password field
label	string	—	The label of the password field
name	string	color	The name of the password field
required	boolean	false	Whether the password field is required
readOnly	boolean	false	Whether the password field is read only
disabled	boolean	false	Whether the password field is disabled

Vue

Name	Type	Default	Description
model-value	Color	—	The value of the password field 1
default-value	Color	—	The default value of the password field
size	Size	md	The size of the password field
label	string	—	The label of the password field
name	string	color	The name of the password field
required	boolean	false	Whether the password field is required
read-only	boolean	false	Whether the password field is read only
disabled	boolean	false	Whether the password field is disabled

1. Can be used with the v-model directive for two-way binding.

Events

React

Name	Type	Description
onChange	(value: Color) => void	Callback fired when the value changes

Vue

Name	Payload	Description
update:model-value	Color	Event emitted when the value changes

Types

type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

See Color type definition for more information.