Your input controls can come in a variety of colors, depending on your preferences. Click here to see the list of available colors.
<div class= "mb-3" >
<label class= "form-label" > Color Input</label>
<div class= "row g-2" >
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color" type= "radio" value= "dark" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-dark" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput form-colorinput-light" >
<input name= "color" type= "radio" value= "white" class= "form-colorinput-input" checked />
<span class= "form-colorinput-color bg-white" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color" type= "radio" value= "blue" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-blue" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color" type= "radio" value= "azure" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-azure" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color" type= "radio" value= "indigo" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-indigo" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color" type= "radio" value= "purple" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-purple" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color" type= "radio" value= "pink" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-pink" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color" type= "radio" value= "red" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-red" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color" type= "radio" value= "orange" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-orange" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color" type= "radio" value= "yellow" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-yellow" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color" type= "radio" value= "lime" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-lime" ></span>
</label>
</div>
</div>
</div>
<div class= "mb-3" >
<label class= "form-label" > Color Input</label>
<div class= "row g-2" >
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color-rounded" type= "radio" value= "dark" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-dark rounded-circle" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput form-colorinput-light" >
<input name= "color-rounded" type= "radio" value= "white" class= "form-colorinput-input" checked />
<span class= "form-colorinput-color bg-white rounded-circle" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color-rounded" type= "radio" value= "blue" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-blue rounded-circle" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color-rounded" type= "radio" value= "azure" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-azure rounded-circle" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color-rounded" type= "radio" value= "indigo" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-indigo rounded-circle" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color-rounded" type= "radio" value= "purple" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-purple rounded-circle" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color-rounded" type= "radio" value= "pink" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-pink rounded-circle" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color-rounded" type= "radio" value= "red" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-red rounded-circle" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color-rounded" type= "radio" value= "orange" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-orange rounded-circle" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color-rounded" type= "radio" value= "yellow" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-yellow rounded-circle" ></span>
</label>
</div>
<div class= "col-auto" >
<label class= "form-colorinput" >
<input name= "color-rounded" type= "radio" value= "lime" class= "form-colorinput-input" />
<span class= "form-colorinput-color bg-lime rounded-circle" ></span>
</label>
</div>
</div>
</div>
Add an color picker to your form to let users customise it according to their preferences.
<div class= "mb-3" >
<label class= "form-label" > Color picker</label>
<input type= "color" class= "form-control form-control-color" value= "#206bc4" title= "Choose your color" >
</div>