Screencast

LiveView Combobox

15. LiveView Combobox

combobox form input typeahead

In this video, we're going to create a combobox component using Phoenix LiveView, inspired by the Headless UI library.

A combobox is a user interface element that combines a drop-down list with an editable text box, allowing users to select from predefined options or enter their own values. This flexibility enhances user experience by providing both convenience and customization.

I'll walk you through building the combobox from scratch, step by step. We'll start by creating a functional component, then transform it into a LiveComponent, and integrate it into a LiveView form. The idea is that it should be a drop-in replacement for a select field.

While doing the research for this, I realized it's surprisingly complex with a lot of edge cases to consider, and the solution I came up with uses a little JavaScript to make it as feature-complete as possible.

By the end of this tutorial, you should have a fully functional, reusable combobox component that you can incorporate into your own Phoenix LiveView applications.

Even though LiveView alone can't handle all the edge cases of a combobox, it's still a great tool to have in your toolbox. If you consider the amount of JavaScript you would need to write and the tooling to set up otherwise, I think this approach is by far the better choice.

Whether you're looking to enhance your forms with more interactive components or aiming to deepen your understanding of Phoenix LiveView, this tutorial is designed to guide you through the entire process. I hope this step-by-step journey will be insightful and help you build more interactive and user-friendly applications with Phoenix LiveView.