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
Vue
Angular

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

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

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

Playground

Preview

Generated Code

<TkColorPicker  size="base"
  orientation="vertical"
  headerType="basic"
  label="Select Color"
  value="#326FD1"
  showAlphaSlider
  showPresets
  showFormatSelector
/>

<TkColorPicker  size="base"
  orientation="vertical"
  headerType="basic"
  label="Select Color"
  value="#326FD1"
  :showAlphaSlider.prop="true"
  :showPresets.prop="true"
  :showFormatSelector.prop="true"
/>

<tk-color-picker  size="base"
  orientation="vertical"
  headerType="basic"
  label="Select Color"
  value="#326FD1"
  [showAlphaSlider]="true"
  [showPresets]="true"
  [showFormatSelector]="true"
/>

Controls

Size:

Orientation:

Header Type:

Label:

Header Label:

Placeholder:

Hint:

Error:

Value:

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
Vue
Angular

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

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

<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>

<tk-color-picker
  label="Select Color"
  [show-asterisk]="true"
  [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
Vue
Angular

<TkColorPicker inline />

<TkColorPicker inline />

<tk-color-picker inline></tk-color-picker>

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

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
Vue
Angular

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>

<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>

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

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

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

<tk-color-picker
  #colorPicker
  label="Select Color"
  [value]="color"
  [prevent-dismiss]="true"
  [show-close-button]="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
Vue
Angular

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

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

<tk-color-picker inline orientation="vertical"></tk-color-picker>
<tk-color-picker inline orientation="horizontal"></tk-color-picker>

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
Vue
Angular

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)}
/>

<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>

// 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
Vue
Angular

<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 />

<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 />

<tk-color-picker label="Disabled" placeholder="Select Color" hint="Hint text" disabled></tk-color-picker>
<tk-color-picker label="Readonly" placeholder="Select Color" hint="Hint text" readonly></tk-color-picker>
<tk-color-picker label="Error" placeholder="Select Color" error="Error text" invalid></tk-color-picker>

API

Props

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).

Playground​

Preview

Generated Code

Controls

Basic​

Inline Mode​

Header Types​

Footer Types​

Selected color: #C79807

Controlled Closing​

Orientation​

Vertical

Horizontal

Custom Presets​

Feature Visibility​

States​

API​

Props​

Events​

Methods​

Slots​

Playground

Basic

Inline Mode

Header Types

Footer Types

Controlled Closing

Orientation

Custom Presets

Feature Visibility

States

API

Props

Events

Methods

Slots