Form color picker component for Phoenix and Phoenix LiveView with floating labels and customizable palette selection.
mix mishka.ui.gen.component color_field
Certain props are shared across all form-related components, and you can find them in the form wrapper.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the gallery, allowing for flexible design changes.
By setting a
date
, the color of the color picker will change dynamically.
<.color_field color="info" value="#0000000" />
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | No | A unique identifier used to manage state and interaction. |
| class | string | No | Custom CSS class for additional styling. |
| color | string | No | Determines color theme (default is "white"). |
| border | string | No | Determines border style (default is "extra_small"). |
| rounded | string | No | Determines the border radius (default is "small"). |
| description | string | No | Determines a short description. |
| size | string | No | Determines the overall size (default is "extra_large"). |
| circle | boolean | No | Determines if the color input should be displayed as a circle. |
| error_icon | string | No | Icon to be displayed alongside error messages. |
| label | string | No | Specifies text for the label. |
| errors | list | No | List of error messages to be displayed. |
| name | any | No | Name of the input. |
| value | any | No | Value of the input (default is "#000000"). |
| start_section | slot | No | Renders content at the start of the element. |
| end_section | slot | No | Renders content at the end of the element. |
Style content goes here.
| Name | Type | Options | Recommended? |
|---|---|---|---|
--color
|
string | white - primary - secondary - dark - success - warning - danger - info - light - misc - dawn | Yes |
--size
|
string | extra_small - small - medium - large - extra_large | Yes |
--rounded
|
string | extra_small - small - medium - large - extra_large | Yes |
--only
|
string | color_field | Yes |
--module
|
string | Something | NO |