Combobox

New version v0.0.9 🚀

Interactive searchable combobox component for Phoenix LiveView with real-time filtering and keyboard navigation

Installation:

mix mishka.ui.gen.component combobox

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless JS

Overview of combobox component

The Phoenix LiveView combobox component provides a searchable dropdown select field that allows users to choose from a list of options. It combines the functionality of both an input field and a dropdown menu, making it ideal for selecting from large datasets. The component is built with a Phoenix Scroll Area component inside to handle large option lists smoothly. It supports dynamic filtering of options as users type, keyboard navigation, and customizable styling through various props like color, size, and border radius.

Choose Your Favorite Pets

Select multiple pets from different categories

Base variant

<.combobox>
  <:option value="ca">Canada</:option>
  <:option value="us">United States</:option>
  <:option value="mx">Mexico</:option>
  <:option value="sp">Spain</:option>
  <:option value="de">Germany</:option>
  <:option value="jp">Japan</:option>
  <:option value="ch">China</:option>
  <:option value="sw">Sweden</:option>
</.combobox>

Default variant

<.combobox variant="default"></.combobox> //natural
<.combobox variant="default" color="primary"></.combobox>
<.combobox variant="default" color="secondary"></.combobox>
<.combobox variant="default" color="misc"></.combobox>
<.combobox variant="default" color="dawn"></.combobox>
<.combobox variant="default" color="info"></.combobox>
<.combobox variant="default" color="danger"></.combobox>
<.combobox variant="default" color="success"></.combobox>
<.combobox variant="default" color="warning"></.combobox>
<.combobox variant="default" color="silver"></.combobox>

Bordred variant

<.combobox variant="bordered"></.combobox> //natural
<.combobox variant="bordered" color="primary"></.combobox>
<.combobox variant="bordered" color="secondary"></.combobox>
<.combobox variant="bordered" color="misc"></.combobox>
<.combobox variant="bordered" color="dawn"></.combobox>
<.combobox variant="bordered" color="info"></.combobox>
<.combobox variant="bordered" color="danger"></.combobox>
<.combobox variant="bordered" color="success"></.combobox>
<.combobox variant="bordered" color="warning"></.combobox>
<.combobox variant="bordered" color="silver"></.combobox>

Label prop

You can use the label prop to add custom title text above the combobox.

Origin Country

<.combobox label="This is label"></.combobox>

Description prop

The description prop allows you to add explanatory text below the label for additional context about the combobox.

Description of filed

<.combobox description="This is description"></.combobox>

Rounded prop

The rounded prop offers values like "extra_small", "small", "medium", "large", and "extra_large".

<.combobox rounded="extra_small"></.combobox>
<.combobox rounded="small"></.combobox>
<.combobox rounded="medium"></.combobox>
<.combobox rounded="large"></.combobox>
<.combobox rounded="extra_large"></.combobox>

Border prop

The border prop offers values like "extra_small", "small", "medium", "large", and "extra_large".

<.combobox border="extra_small"></.combobox>
<.combobox border="small"></.combobox>
<.combobox border="medium"></.combobox>
<.combobox border="large"></.combobox>
<.combobox border="extra_large"></.combobox>

Padding prop

The padding prop offers values such as "extra_small", "small", "medium", "large", and "extra_large". These values control the padding around the content inside the combobox.

<.combobox padding="extra_small"></.combobox>
<.combobox padding="small"></.combobox>
<.combobox padding="medium"></.combobox>
<.combobox padding="large"></.combobox>
<.combobox padding="extra_large"></.combobox>

Space prop

The space prop offers values such as "extra_small", "small", "medium", "large", and "extra_large".

<.combobox space="extra_small"></.combobox>
<.combobox space="small"></.combobox>
<.combobox space="medium"></.combobox>
<.combobox space="large"></.combobox>
<.combobox space="extra_large"></.combobox>

Size prop

The size prop offers values such as "extra_small", "small", "medium", "large", and "extra_large". These values control the padding around the content inside the combobox.

<.combobox size="extra_small"></.combobox>
<.combobox size="small"></.combobox>
<.combobox size="medium"></.combobox>
<.combobox size="large"></.combobox>
<.combobox size="extra_large"></.combobox>

Searchable prop

<.combobox searchable></.combobox>

Searchable prop

<.combobox searchable search_placeholder="Searrrch"></.combobox>

Group Combobox

<.combobox>
    <:option group="Group 1">Sedan</:option>
    <:option group="Group 1" value=""></:option>
    <:option group="Group 1" value=""></:option>
    <:option group="Group 1" value=""></:option>

    <:option group="Group 2" value=""></:option>
    <:option group="Group 2" value=""></:option>
    <:option group="Group 2" value=""></:option>
    <:option group="Group 2" value=""></:option>

    <:option group="Group 3" value=""></:option>
    <:option group="Group 3" value=""></:option>
    <:option group="Group 3" value=""></:option>
  </.combobox>

Multi Select

The multiple prop is a boolean that enables multi-select functionality in the combobox. When enabled, users can select multiple options which will appear as tags in the input field.

<.combobox muktiple={true}>
  <.option>Sedan</.option>
  <.option value=""></.option>
  <.option value=""></.option>
  <.option value=""></.option>
</.combobox>

Creatable prop

The creatable prop enables users to add new options directly from the search input when no matching result is found. This is useful for dynamic forms where predefined options may not cover all user needs, such as tag management, category assignment, or custom field entries. When enabled, an "Add '[typed text]'" button appears in the dropdown, allowing inline option creation without leaving the form. Use the create_label prop to customize the button prefix and the on_create prop to specify a server event that is pushed when a new option is created.

Note: When using


  on_create

, your LiveView must reply instead of using


  :noreply

. Return


  
              {:reply, %{value: val, label: lbl}, socket}

to accept the option, or


  {:reply, %{error: "reason"}, socket}

to reject it and remove it from the dropdown. Try typing "error" in the example below to see the rejection in action.

<.combobox
  id="language-select"
  options={@creatable_languages}
  placeholder="Select a language"
  searchable
  creatable
  create_label="Add"
  on_create="add_language"
/>

# In your LiveView — reject by pattern matching:
def handle_event("add_language", %{"value" => "error"}, socket) do
  {:reply, %{error: "This value is not allowed"}, socket}
end

# Accept (optionally modify value/label):
def handle_event("add_language", %{"value" => value}, socket) do
  {:reply, %{value: value, label: value}, socket}
end

Real world example

Full Name

Select your area of expertise

Do you accept terms and conditions?

Combobox Component Props

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.
placeholder	string	No	Placeholder text for the component.
color	string	No	Determines the color theme (default is "natural").
variant	string	No	Determines the variant theme (default is "base").
border	string	No	Determines border style (default is "extra_small").
rounded	string	No	Determines the border radius (default is "medium").
padding	string	No	Determines padding size (default is "small").
height	string	No	Dropdown height (default is "h-40").
label	string	No	Specifies text for the label.
description	string	No	Short description for the component.
size	string	No	Determines overall size (default is "small").
error_icon	string	No	Icon displayed alongside error messages.
errors	list	No	List of error messages to display.
name	any	No	Name of the input.
value	any	No	Value of the input.
field	Phoenix.HTML.FormField	No	A form field struct retrieved from the form.
searchable	boolean	No	Add input search to dropdown of combobox
search_placeholder	string	No	Add custom placholder to dropdown search input
creatable	boolean	No	Enables creating new options from search input when no match is found.
create_label	string	No	Label prefix for the create option button (default is "Create").
on_create	string	No	Event name pushed to the server when a new option is created.

Combobox CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - bordered - base	Yes
`--color`	string	base - natural - primary - secondary - success - warning - danger - info - silver - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--space`	string	extra_small - small - medium - large - extra_large - none	Yes
`--padding`	string	extra_small - small - medium - large - extra_large	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large	Yes
`--only`	string	combobox	Yes
`--module`	string	Something	NO