Color Input/Picker ​

The Color component provides two variants to let users specify a color: Color Input and Color Picker. The ColorInput component displays the color value and triggers a picker for color selection, while the ColorPicker component provides a more interactive way to select colors from a color palette.

When to Use

• Use ColorInput to display an input field for color values.
• Use ColorPicker for a more interactive and visual color selection experience.

Color Input ​

Usage ​

import { ColorInput } from '@youcan/alto';

<ColorInput v-model="color" @update:v-model="updateColor" />

API Reference ​

Color Picker ​

Usage ​

import { ColorPicker } from '@youcan/alto';

const color = ref('#A8B1FFFF');

<ColorPicker v-model="color" />

API Reference ​