Form email input component for Phoenix and Phoenix LiveView with floating labels and real-time validation.
mix mishka.ui.gen.component email_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.
<.email_field />
| 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 "light"). |
| border | string | No | Determines border style (default is "extra_small"). |
| rounded | string | No | Determines the border radius (default is "small"). |
| variant | string | No | Determines the style (e.g., outline, default). |
| description | string | No | Determines a short description. |
| space | string | No | Space between items (default is "medium"). |
| size | string | No | Determines the overall size (default is "extra_large"). |
| ring | boolean | No | Determines a ring border on focused input. |
| floating | string | No | Controls floating label behavior (none, inner, outer). |
| error_icon | string | No | Icon 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 nil). |
| 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? |
|---|---|---|---|
--variant
|
string | default - outline - unbordered - shadow - transparent | Yes |
--color
|
string | white - primary - secondary - dark - success - warning - danger - info - light - misc - dawn - silver | Yes |
--size
|
string | extra_small - small - medium - large - extra_large | Yes |
--space
|
string | extra_small - small - medium - large - extra_large | Yes |
--rounded
|
string | extra_small - small - medium - large - extra_large - full | Yes |
--only
|
string | email_field | Yes |
--module
|
string | Something | NO |