Taiga UI 5.0 is out!

InputColor KIT

Examples API GitHub

On this page

InputColor = Textfield + type="color" + Maskito + ❤️

Basic

    
      
    
    
      <tui-textfield iconStart=" ">
    <label tuiLabel>Choose color</label>
    <input
        list="colors"
        placeholder="#000000"
        tuiInputColor
        [formControl]="control"
    />
    <datalist id="colors">
        <option value="#800000"></option>
        <option value="#8B0000"></option>
        <option value="#A52A2A"></option>
        <option value="#DC143C"></option>
    </datalist>
</tui-textfield>

    

Opacity

    
      
    
    
      <tui-textfield iconStart="@tui.paintbrush">
    <label tuiLabel>Choose color</label>
    <input
        placeholder="#00000000"
        tuiInputColor
        [(ngModel)]="value"
    />
</tui-textfield>
<label class="label">
    <span>0%</span>
    <span>Opacity</span>
    <span>100%</span>
</label>

    
    
      @import '@taiga-ui/styles/utils.less';

.label {
    .tui-slider-ticks-labels();
}