ColorInput

Used to select colors from a color area.

Demo

React

Vue

Example

React

import { useState } from 'react';
// Import component
import { ColorInput } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/color_input.css';

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

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

Vue

<script setup lang="ts">
import { ref } from 'vue';
// Import component
import { ColorInput } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/color_input.css';

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

<template>
  <ColorInput
    v-model="color"
    size="md"
    name="color"
    label="Select a colour"
  />
</template>

Props

React

Name	Type	Default	Description
value	Color	—	The value of the color input
defaultValue	Color	—	The default value of the color input
orientation	Orientation	vertical	The orientation of the color input
size	FieldSize	md	The size of the color input
label	string	—	The label of the color input
name	string	color	The name of the color input
clearable	boolean	false	Whether the value can be cleared
required	boolean	false	Whether the value is required
readOnly	boolean	false	Whether the input is read only
disabled	boolean	false	Whether the input is disabled

Vue

Name	Type	Default	Description
model-value	Color	—	The value of the color input 1
default-value	Color	—	The default value of the color input
orientation	Orientation	vertical	The orientation of the color input
size	FieldSize	md	The size of the color input
label	string	—	The label of the color input
name	string	color	The name of the color input
clearable	boolean	false	Whether the value can be cleared
required	boolean	false	Whether the value is required
read-only	boolean	false	Whether the input is read only
disabled	boolean	false	Whether the input is disabled

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

Events

React

Name	Type	Description
onValueChange	(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 FieldSize = 'sm' | 'md' | 'lg'
type Orientation = 'horizontal' | 'vertical'

See Color type definition for more information.