t-input-color

This component provides color selection, validation and state. It has three different designs and has many options to tweak its properties.

Learn more about forms.

Learn more about t-color-picker.

Basic Usage

<TInputColor
  label="Primary color"
  placeholder="Select a color"
  persistentPlaceholder
  //
/>

Initial Value and Alpha Slider

<TInputColor
  controller={TInputColorController.create({
    value: { hexa: "#F50084FF" },
  })}
  label="Primary color"
  placeholder="Select a color"
  alpha
/>

Preview, Display and Layout

<TInputColor
  label="Primary color"
  placeholder="Select a color"
  layout="box"
  display="rgba"
  persistentPlaceholder
  preview
/>

With Other Input Components

<TGrid cols="1" colsMd="2" gap="4">
  <TInputText
    type="email"
    label="Email"
    placeholder="Enter your email"
    hint="Please enter a correct email"
    persistentPlaceholder
    persistentHint
  />
  <TInputColor
    label="Select Your Car"
    placeholder="Select a color"
    hint="Please select one option"
    persistentPlaceholder
    persistentHint
  />
</TGrid>

API

TODO

Colors

t-color-picker

Colors

use-color-picker-modal

Table of Contents