Color Input
Usage notes
Color inputs are used as color form fields.
Default
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label1" class="coral-Form-fieldlabel">Label</label>
<coral-colorinput labelledby="label1"></coral-colorinput>
</form>
With auto generated shades
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label2" class="coral-Form-fieldlabel">Label</label>
<coral-colorinput labelledby="label2" value="rgb(0,0,255)" autogeneratecolors="shades"></coral-colorinput>
</form>
With swatches only
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label3" class="coral-Form-fieldlabel">Label</label>
<coral-colorinput labelledby="label3" autogeneratecolors="tints" showswatches="on" showproperties="off" placeholder="Choose a Color"></coral-colorinput>
</form>
With color properties only
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label4" class="coral-Form-fieldlabel">Label</label>
<coral-colorinput labelledby="label4" showswatches="off" showproperties="on" value="rgb(255, 160, 130)"></coral-colorinput>
</form>
With pre-defined custom colors
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label5" class="coral-Form-fieldlabel">Label</label>
<coral-colorinput labelledby="label5" value="rgba(255,0,0,0.5)">
<coral-colorinput-item value="#DDDDDD"></coral-colorinput-item>
<coral-colorinput-item value="rgb(16,16,16)"></coral-colorinput-item>
<coral-colorinput-item value="hsb(300,100,100)"></coral-colorinput-item>
<coral-colorinput-item value="#DDDDDD"></coral-colorinput-item>
</coral-colorinput>
</form>
Swatch variant
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label6" class="coral-Form-fieldlabel">Label</label>
<coral-colorinput labelledby="label6" variant="swatch" value="#ffffff"></coral-colorinput>
</form>
Disabled
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label7" class="coral-Form-fieldlabel">Label</label>
<coral-colorinput labelledby="label7" value="#39CCCC" disabled=""></coral-colorinput>
</form>
Invalid
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label8" class="coral-Form-fieldlabel">Label</label>
<coral-colorinput labelledby="label8" value="hello" invalid=""></coral-colorinput>
</form>
ReadOnly
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label9" class="coral-Form-fieldlabel">Label</label>
<coral-colorinput labelledby="label9" value="rgb(233, 233, 233)" readonly=""></coral-colorinput>
</form>
Form Field
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label10" class="coral-FieldLabel">Label</label>
<coral-colorinput labelledby="label10" class="coral-Form-field"></coral-colorinput>
</form>