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.

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" />

Unbordered Variant

The unbordered variant of the Mishka Chelekom forms is similar to the default variant, but without border.

<.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.

<.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>