ColorInput

Color picker input field with preview swatch for selecting colors

Basic Color Input

Simple color picker input with preview

Show Code

Color Input Sizes

Different color input sizes

Show Code

Color Input Variants

Different visual styles

Show Code

Color Input States

Different input states and colors

Show Code

Usage Notes

  • Use showPreview to display a color swatch alongside the input
  • Color values should be in hex format (#rrggbb)
  • Combine with labels for better accessibility
  • Consider using validation for proper hex color format
  • Preview swatch adds visual feedback for better UX