Overview of the Phoenix and LiveView Form Component
The Mishka Chelekom form component is a Phoenix LiveView component that allows developers to create consistent and customizable forms using various input types, including text, number, email, telephone, and textarea fields. Each of these input types shares the same design and style, ensuring a unified and polished look across the form.
This Phoenix LiveView form component supports uniform styling for all form elements, including input fields, floating labels, and validation messages, providing a seamless user experience. Its responsive and flexible design makes it easy to apply across different input types while maintaining a consistent and professional appearance.
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.
Outline Variant
The outline style of the Mishka Chelekom forms features a border. Using a single setting, you can choose from various color variants to suit your design needs.
<.text_field color="silver" /> <.text_field color="white" /> <.text_field color="primary" /> <.text_field color="secondary" /> <.text_field color="dark" /> <.text_field color="success" /> <.text_field color="warning" /> <.text_field color="danger" /> <.text_field color="info" /> <.text_field color="light" /> <.text_field color="misc" /> <.text_field color="dawn" />
Default Variant
The default style of the Mishka Chelekom forms applies a solid background and border that change based on user interaction, making it perfect for delivering important notifications. With just a single setting, you can select from a range of color options, ensuring easy customization to match various design styles.
<.text_field variant="default" color="white" /> <.email_field variant="default" color="primary" /> <.textarea_field variant="default" color="secondary" /> <.text_field variant="default" color="dark" /> <.text_field variant="default" color="success" /> <.textarea_field variant="default" color="warning" /> <.tel_field variant="default" color="danger" /> <.text_field variant="default" color="info" /> <.text_field variant="default" color="light" /> <.email_field variant="default" color="misc" /> <.tel_field variant="default" color="dawn" />
Shadow Variant
The shadow variant of the Mishka Chelekom forms is similar to the default variant, but it also includes a subtle shadow along with a border and white background in light mode.
<.text_field variant="shadow" color="white" /> <.text_field variant="shadow" color="primary" /> <.textarea_field variant="shadow" color="secondary" /> <.text_field variant="shadow" color="dark" /> <.text_field variant="shadow" color="success" /> <.number_field variant="shadow" color="warning" /> <.text_field variant="shadow" color="danger" /> <.email_field variant="shadow" color="info" /> <.tel_field variant="shadow" color="light" /> <.text_field variant="shadow" color="misc" /> <.text_field variant="shadow" color="dawn" />
bordered Variant
The Bordered variant of the Mishka Chelekom form has lighter background and a border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.
<.text_field variant="unbordered" color="white" /> <.text_field variant="unbordered" color="primary" /> <.textarea_field variant="unbordered" color="secondary" /> <.tel_field variant="unbordered" color="dark" /> <.text_field variant="unbordered" color="success" /> <.email_field variant="unbordered" color="warning" /> <.text_field variant="unbordered" color="danger" /> <.text_field variant="unbordered" color="info" /> <.text_field variant="unbordered" color="light" /> <.number_field variant="unbordered" color="misc" /> <.text_field variant="unbordered" color="dawn" />
Transparent Variant
The transparent variant of the Mishka Chelekom forms is similar to the default variant, but without border and background color.
<.text_field variant="transparent" color="white" /> <.text_field variant="transparent" color="primary" /> <.email_field variant="transparent" color="secondary" /> <.text_field variant="transparent" color="dark" /> <.text_field variant="transparent" color="success" /> <.text_field variant="transparent" color="warning" /> <.number_field variant="transparent" color="danger" /> <.text_field variant="transparent" color="info" /> <.number_field variant="transparent" color="light" /> <.tel_field variant="transparent" color="misc" /> <.textarea_field variant="transparent" color="dawn" />
Rounded prop in Phoenix LiveView form Component
The rounded prop offers values like
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control the border radius of the blcokquotes, allowing for different levels of rounding from subtle to more pronounced corners, depending on the design needs.
<.text_field rounded="extra_small" /> <.text_field rounded="small" /> <.email_field rounded="medium" /> <.text_field rounded="large" /> <.url_field rounded="extra_large" /> <.number_field rounded="full" />
Border prop
The border prop offers values like
extra_small
,
small
,
medium
,
large
, and
extra_large
.
<.text_field border="extra_small" /> <.email_field border="small" /> <.text_field border="medium" /> <.number_field border="large" /> <.text_field border="extra_large" />
Size prop
The size prop offers values such as
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control both the icon size and input height size within the forms.
<.url_feild size="extra_small" /> <.text_field size="small" /> <.email_field size="medium" /> <.email_field size="large" /> <.tel_field size="extra_large" />
Space prop
The space prop offers values such as
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control the vertical spacing between elements within the form labelas and descriptions and input.
<.text_field space="extra_small" /> <.text_field space="small" /> <.text_field space="medium" /> <.text_field space="large" /> <.text_field space="extra_large" />
Ring prop
The
ring
attribute is a boolean option, with a default value of true, that controls whether a ring border is applied to an input field when it is focused. This attribute allows you to add a visually distinct outline around focused form fields using utilities like box-shadows to create the ring effect. When set to true, the outline is applied automatically upon focus, improving user interaction and focus.
<.text_field ring />
Floating prop
The
floating
attribute is a string that determines the floating label behavior for an input field, with options for
none
,
inner
, and
outer
. By default, no floating label is applied (
none
), but if set to
inner
, the label appears inside the input wrapper and transitions upward when focused or filled. The
outer
option places the label on the border of the input, creating a transparent floating effect around the field. These options allow for flexible label positioning, enhancing the user's interaction with form fields.
It is recommended not to use the
placeholder
attribute with floating labels, as the label itself serves this purpose and ensures a cleaner interface.
<.text_field floating="none" /> <.text_field floating="inner" /> <.text_field floating="outer" />
Error icon prop
The
error_icon
attribute is a string that specifies an icon to be displayed alongside error messages in a form field. By default, this attribute is set to
nil
, meaning no icon is shown unless specified. You can choose any icon from the Hero Icons library to enhance the visual feedback when an error occurs, helping users quickly identify and address form issues. This customization adds an extra layer of clarity and improves user experience by associating an icon with error states.
<!--you can use any hero-icons icon --> <.text_field error_icon="hero-shield-exclamation" />
Label prop
The
label
prop is a string that defines the text displayed as the label for an input field.
<.text_field labe="field_label" />
Description prop
The
description
prop is a string that provides a small, helpful text displayed below the label. This description offers additional context or guidance for users about the input field, clarifying its purpose or instructions on what to enter.
<.text_field description="field_description" /> <.number_field description="field_description" /> <.url_field description="field_description" /> <.email_field description="field_description" /> <.textarea_field description="field_description" />
Name prop
The
name
prop represents the name attribute for an input field, serving as a key identifier when submitting form data. It links the input value to a specific field name in the form, allowing the backend or processing scripts to correctly handle the submitted information. The
name
prop is essential for form submissions, ensuring that data entered by the user is captured and processed accurately. Each input field should have a unique
name
to avoid conflicts and ensure the proper handling of form data.
<.text_field name="field_name" /> <.email_field name="field_name" /> <.number_field name="field_name" />
Value prop
The
value
attribute represents the data or content associated with the input field. It is flexible, accepting any type of value, such as strings, numbers, or other data types. The
value
attribute is essential for both capturing user input and pre-populating form fields with existing data. It allows the input to hold and display a specific value, ensuring that the input's state can be managed dynamically or passed along during form submissions.
<.text_field value="field_value" /> <.text_field value="" />
Errors prop
The
errors
attribute is a list that holds error messages related to an input field. By default, it is an empty list, but when validation fails or other issues arise, you can populate this list with relevant error messages. These messages will be displayed to inform users of any issues with their input, providing clear feedback on how to correct the problem. The
errors
attribute enhances the form's user experience by ensuring that users receive immediate, understandable error notifications, helping them to complete the form accurately.
<.text_field errors={["Invalid email"]} />
start and end section slots
The
errors
attribute is a list that holds error messages related to an input field. By default, it is an empty list, but when validation fails or other issues arise, you can populate this list with relevant error messages. These messages will be displayed to inform users of any issues with their input, providing clear feedback on how to correct the problem. The
errors
attribute enhances the form's user experience by ensuring that users receive immediate, understandable error notifications, helping them to complete the form accurately.
<.tel_field> <:start_section> +31 </:start_section> </.tel_field> <.tel_field> <:start_section> <.icon name="hero-user" class="your_classes" /> </:start_section> </.tel_field> <.email_field> <:start_section> <.icon name="hero-envelope" class="your_classes" /> </:start_section> </.email_field>
Form wrapper component
The
form_wrapper
component in Phoenix LiveView is used to wrap form elements and manage form data. It has two key attributes that enhance its functionality. The
for
attribute is optional and represents the data structure that the form will bind to, allowing the form to be populated with existing data or updated dynamically. The
as
attribute allows you to group all form inputs under a specific server-side parameter, making it easier to handle the form data on submission. These attributes provide flexibility in how form data is structured and managed in LiveView applications.
<.form_wrapper for={@form}> <div class="grid lg:grid-cols-2 gap-2"> <.text_field name="name1" value="" space="small" color="light" label="Name" placeholder="Enter your name" /> <.text_field name="name1" value="" space="small" color="light" label="Family" placeholder="Enter your family" /> <.email_field name="name1" value="" space="small" color="light" label="Email" placeholder="Enter your rmail" /> </div> </.form_wrapper>