Color Input | Latty

Components

Color Input

A read-only textfield that opens the browser's native color picker on click. Displays the selected hex value alongside a live color swatch preview.

Playground

Controls

Value

Format

Label

Placeholder

Disabled

Required

Name

Size

Labels

Theme

HTML

React

Copy

<lt-color-input label="Brand color" value="#7c3aed"></lt-color-input>

import { ColorInput } from '@latty-ds/react';

<ColorInput label="Brand color" value="#7c3aed" onChange={(e) => console.log(e.detail.value)} />

<template>
<lt-color-input label="Brand color" value="#7c3aed" @change="onColorChange"></lt-color-input>
</template>