Color-Picker

The TkColorPicker component provides a color selection interface with various input formats. It supports HEX and RGB color formats with an optional alpha channel.

React

import { TkColorPicker } from '@takeoff-ui/react'

Vue

import { TkColorPicker } from '@takeoff-ui/vue'

Angular

import { TkColorPicker } from '@takeoff-ui/angular'

Basic

The default TkColorPicker renders with a trigger input that displays the selected color. Clicking the trigger opens a panel where users can select colors using the saturation area, hue slider, and direct value inputs.

View Code

React

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

<TkColorPicker
  label="Select Color"
  showAsterisk
  value={color}
  onTkChange={(e) => setColor(e.detail)}
/>

Vue

<script setup>
import { TkColorPicker } from '@takeoff-ui/vue';
import { ref } from 'vue';

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

<template>
  <TkColorPicker
    label="Select Color"
    showAsterisk
    v-model="color"
  />
</template>

Angular

<tk-color-picker
  label="Select Color"
  showAsterisk
  [value]="color"
  (tkChange)="onColorChange($event)">
</tk-color-picker>

Inline Mode

Set inline to display the color picker panel directly without a trigger element. This is ideal for settings pages, theme builders, or anywhere the color picker should always be visible.

View Code

React

<TkColorPicker inline />

Vue

<TkColorPicker inline />

Angular

Header Types

The headerType prop allows you to customize the header appearance. Available options are basic, divided, light, dark, and primary. Each type provides a distinct visual style to match your application's design language.

View Code

React

Vue

Angular

Footer Types

The footer is slot-based and only renders when you provide content via footer or footer-actions slots. Use the footerType prop to style the footer container with basic, divided, or light variants. Use the apply() and cancel() methods to handle user actions programmatically.

Selected color: #C79807

View Code

React

Vue

Angular

Controlled Closing

Use preventDismiss and showCloseButton props to control how the panel can be closed. When preventDismiss is true, clicking outside the panel won't close it - users must use the provided action buttons. Set showCloseButton to false to hide the header close icon, forcing users to interact with footer actions.

View Code

React

const [color, setColor] = useState('#326FD1');
const pickerRef = useRef<HTMLTkColorPickerElement>(null);

const handleApply = () => {
  pickerRef.current?.apply();
};

const handleCancel = () => {
  pickerRef.current?.cancel();
};

<TkColorPicker
  ref={pickerRef}
  label="Select Color"
  value={color}
  preventDismiss
  showCloseButton={false}
  onTkChange={(e) => setColor(e.detail)}
>
  <div slot="footer-actions">
    <TkButton label='Cancel' variant="secondary" size="small" onTkClick={handleCancel}>
    </TkButton>
    <TkButton label='Apply' variant="primary" size="small" onTkClick={handleApply}>
    </TkButton>
  </div>
</TkColorPicker>

Vue

<script setup>
import { TkColorPicker, TkButton } from '@takeoff-ui/vue';
import { ref } from 'vue';

const color = ref('#326FD1');
const pickerRef = ref(null);

const handleApply = () => {
  pickerRef.value?.apply();
};

const handleCancel = () => {
  pickerRef.value?.cancel();
};
</script>

<template>
  <TkColorPicker
    ref="pickerRef"
    label="Select Color"
    v-model="color"
    preventDismiss
    :showCloseButton="false"
  >
    <div slot="footer-actions">
      <TkButton label='Cancel' variant="secondary" size="small" @tk-click="handleCancel">
      </TkButton>
      <TkButton label='Apply' variant="primary" size="small" @tk-click="handleApply">
      </TkButton>
    </div>
  </TkColorPicker>
</template>

Angular

@ViewChild('colorPicker') colorPicker: ElementRef<HTMLTkColorPickerElement>;

handleApply() {
  this.colorPicker.nativeElement.apply();
}

handleCancel() {
  this.colorPicker.nativeElement.cancel();
}

<tk-color-picker
  #colorPicker
  label="Select Color"
  [value]="color"
  [preventDismiss]="true"
  [showCloseButton]="false"
  (tkChange)="onColorChange($event)">
  <div slot="footer-actions">
    <tk-button label='Cancel' variant="secondary" size="small" (tkClick)="handleCancel()">
    </tk-button>
    <tk-button label='Apply' variant="primary" size="small" (tkClick)="handleApply()">
    </tk-button>
  </div>
</tk-color-picker>

Orientation

The component supports two panel layouts via the orientation prop. The default vertical layout places the saturation area above the controls, while horizontal arranges them side by side for a more compact footprint.

Vertical

Horizontal

View Code

React

<TkColorPicker inline orientation="vertical" />
      <TkColorPicker inline orientation="horizontal" />

Vue

<TkColorPicker inline orientation="vertical" />
      <TkColorPicker inline orientation="horizontal" />

Angular

Custom Presets

The presets prop accepts an array of color strings to display as quick-select swatches. Use this to provide brand colors, theme palettes, or frequently used colors for your users.

View Code

React

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

const customPresets = [
  '#E63946', '#F1FAEE', '#A8DADC', '#457B9D', '#1D3557',
  '#F4A261', '#2A9D8F', '#E9C46A', '#264653', '#E76F51'
];

<TkColorPicker
  label="Brand Colors"
  presets={customPresets}
  value={color}
  inline
  onTkChange={(e) => setColor(e.detail)}
/>

Vue

<script setup>
import { TkColorPicker } from '@takeoff-ui/vue';
import { ref } from 'vue';

const color = ref('#E63946');

const customPresets = [
  '#E63946', '#F1FAEE', '#A8DADC', '#457B9D', '#1D3557',
  '#F4A261', '#2A9D8F', '#E9C46A', '#264653', '#E76F51'
];
</script>

<template>
  <TkColorPicker
    label="Brand Colors"
    :presets="customPresets"
    inline
    v-model="color"
  />
</template>

Angular

// component.ts
customPresets = [
  '#E63946', '#F1FAEE', '#A8DADC', '#457B9D', '#1D3557',
  '#F4A261', '#2A9D8F', '#E9C46A', '#264653', '#E76F51'
];

// component.html
<tk-color-picker
  label="Brand Colors"
  [presets]="customPresets"
  [value]="color"
  inline
  (tkChange)="onColorChange($event)">
</tk-color-picker>

Feature Visibility

Toggle individual features to customize the picker interface. Use showAlphaSlider for transparency support, showPresets for quick-access color swatches, and showFormatSelector to allow switching between HEX and RGBA formats.

View Code

React

Vue

Angular

States

View Code

React

<TkColorPicker label="Disabled" placeholder="Select Color" hint="Hint text" disabled />
<TkColorPicker label="Readonly" placeholder="Select Color" hint="Hint text" readonly />
<TkColorPicker label="Error" placeholder="Select Color" error="Error text" invalid />

Vue

<TkColorPicker label="Disabled" placeholder="Select Color" hint="Hint text" disabled />
<TkColorPicker label="Readonly" placeholder="Select Color" hint="Hint text" readonly />
<TkColorPicker label="Error" placeholder="Select Color" error="Error text" invalid />

Angular

API

Props

Name	Type	Default	Description
	boolean	false	Disables the color picker
	string	null	This is the error message that will be displayed.
	"basic", "divided", "light"	'basic'	The type of the footer styling
	"hex", "rgba"	'hex'	Color format for display and output
	string	null	Title displayed in the panel header
	"basic", "dark", "divided", "light", "primary"	'basic'	The type of the header styling
	string	null	Provided a hint or additional information about the input.
	boolean	false	Displays the picker inline without trigger
	boolean	false	Indicates whether the input is in an invalid state
	string	null	Label text displayed above the trigger input
	string	null	The name of the control, which is submitted with the form data.
	"horizontal", "vertical"	'vertical'	Panel layout orientation
	string	null	Placeholder text displayed when the input is empty.
	string[]	['#326FD1', '#C79807', '#A45E3C', '#119C8D', '#EDBBA3', '#ABC9FB', '#D0E1FD', '#FF6259', '#717784', '#85B2F9', '#EAD6FD']	Array of preset color values
	boolean	false	Prevents the panel from being dismissed by clicking outside. Use with footer actions (Apply/Cancel buttons) for controlled closing.
	boolean	false	If true, the user cannot modify the value.
	boolean	true	Shows/hides the alpha slider
	boolean	false	Displays a red asterisk (*) next to the label for visual emphasis.
	boolean	false	Controls whether the close button is shown in the header. Set to false when using footer actions for controlled closing.
	boolean	true	Shows/hides the format selector
	boolean	false	Controls whether the header is shown
	boolean	true	Shows/hides the preset colors section
	"base", "large", "small"	'base'	Sets size for the component.
	string	''	The current color value (supports HEX and RGB formats)

Events

Name	Description
tk-apply	Emitted when the apply button is clicked
tk-cancel	Emitted when the cancel button is clicked
tk-change	Emitted when the color is applied/confirmed
tk-close	Emitted when the panel closes
tk-open	Emitted when the panel opens

Methods

Name	Type	Description
apply	apply() => Promise<void>	Applies the current color selection and closes the panel Use this method in custom footer actions
cancel	cancel() => Promise<void>	Cancels the color selection, reverts to previous value, and closes the panel Use this method in custom footer actions
close	close() => Promise<void>	Closes the color picker panel
getValue	getValue(format?: "hex" | "rgba") => Promise<string>	Gets the current color value in the specified format
open	open() => Promise<void>	Opens the color picker panel

Slots

Name	Description
footer	Custom footer template (replaces default footer container).
footer-actions	Custom actions template for footer layout with styled container.
header	Custom header template (replaces default header completely).
header-actions	Custom actions template for header (replaces close button).