Phoenix Components implement a feature called 'slots'. Render the Inner Block with Phoenix Component Slots Next up, we'll look at how the form fields we specified between our opening and closing tags are rendered into the template with the component slot functionality. The HEEx template renders, and HTML is constructed from various assigns values. Most of this template has been pretty straightforward so far. Then the token, if present, is added to the HTML form in another hidden input. Next up, you can see that the assigns determines if and how to populate the hidden input. This will render the tag with the appropriate method= and action= attributes. Let's dig into how the template uses some of the assigns established in the previous step.įirst up, you can see that the assigns is interpolated directly into the opening tag. Unsurprisingly, the form/1 function component simply returns a HEEx template wrapping a call to an HTML. We'll break down this process one step at a time, beginning with the creation of the form struct. So, you won't be surprised to see that at its core, the form/1 function component sets up a struct and renders it in a HEEx template that returns an HTML form. You already know that a function component takes in an argument of some assigns and returns some markup wrapped in a HEEx template. Now that we've seen how to call on the form/1 function component, let's dive into the function's implementation. We'll see that in action later on in this post. This eloquent, declarative syntax is made possible by the Phoenix Component's render_slot/2 functionality. Lastly, you'll notice that we're actually calling the form/1 function component with an opening and closing tag, and we've enclosed the content of our form within those tags. In addition to the form options we're giving to assigns, we also use the let assigns to tell the function component to give a value back to the caller. In fact, we can optionally pass in any of the same options you would give to _for/4, and the form/3 function component will use those options in the same way. We pass in the changeset, an ID, and some LiveView form bindings. Some of the attributes passed as part of the assigns probably look familiar from working with _for/4. The form/1 function component, like all function components, is called with one argument of the assigns. Then, we'll trace what's happening under the hood. Let's break down the function invocation here. We'll define a UserDetails module that implements a function component, contact_info.Īlready, we can see that the form/1 function component offers a clean and easy-to-read syntax for describing forms. Any function that takes in an argument of assigns and returns some markup wrapped in a HEEx template is a function component. Function components are defined in modules that use the Phoenix.Component behavior.

What Are Function Components in Phoenix LiveView?īefore we dive into the form/1 function component, let's discuss LiveView's function components at a high level. When we're done, you'll know exactly how the form/1 function renders your forms and you'll have a deeper understanding of LiveView components, setting you up to build your own components in the future. We'll dive into the Phoenix Component functionality that underpins this function and explore features like component slots. In this post, we'll look under the hood of the form/1 function component. However, the form/1 function component can feel a little mysterious to anyone unfamiliar with LiveView's function components.

LiveView's form/1 function component is a great example of this, making it easier than ever before to render complex forms within LiveView. Thanks to HEEx and function components, LiveView provides developers with a sleek, ergonomic syntax for building and maintaining sophisticated interactive UIs.

Phoenix liveview mount