Combobox
v0.0.10
mix mishka.ui.gen.component combobox
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.
Overview of combobox component
Base variant
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
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>Bordered variant
Bordered 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.
Label prop
<.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 prop
<.combobox description="This is description"></.combobox>Rounded prop
The rounded prop offers values like "extra_small", "small", "medium", "large", and "extra_large".
Rounded prop
<.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".
Border prop
<.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 set the horizontal padding of the combobox trigger.
Padding prop
<.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". These values set the vertical space between the label, the description and the trigger.
Space prop
<.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 set the minimum height of the trigger, the size of its icon and the text size of the trigger and the options.
Size prop
<.combobox size="extra_small"></.combobox>
<.combobox size="small"></.combobox>
<.combobox size="medium"></.combobox>
<.combobox size="large"></.combobox>
<.combobox size="extra_large"></.combobox>Searchable prop
The searchable prop is a boolean. It adds a search box at the top of the dropdown, so the user can type to filter the options.
Searchable prop
<.combobox searchable></.combobox>Search placeholder prop
The search_placeholder prop sets the placeholder text of the search box.
Search placeholder prop
<.combobox searchable search_placeholder="Search a country"></.combobox>Group Combobox
Group Combobox
<.combobox>
<:option group="Cars" value="sedan">Sedan</:option>
<:option group="Cars" value="suv">SUV</:option>
<:option group="Cars" value="coupe">Sports Coupe</:option>
<:option group="Cars" value="hatchback">Hatchback</:option>
<:option group="Motorcycles" value="cruiser">Cruiser</:option>
<:option group="Motorcycles" value="sport">Sport Bike</:option>
<:option group="Motorcycles" value="touring">Touring</:option>
<:option group="Motorcycles" value="dirt">Dirt Bike</:option>
<:option group="Commercial" value="truck">Delivery Truck</:option>
<:option group="Commercial" value="van">Cargo Van</:option>
<:option group="Commercial" value="bus">Bus</: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.
Multi Select
<.combobox multiple={true}>
<:option value="apple">Apple</:option>
<:option value="banana">Banana</:option>
<:option value="orange">Orange</:option>
<:option value="mango">Mango</: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, a button labeled Create 'typed text' appears in the dropdown, allowing inline option creation without leaving the form. Use the create_label prop to change the word before the typed text and the on_create prop to specify a server event that is pushed when a new option is created.
Creatable prop
<.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}
endReal world example
Real world example
Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
any
| — | — | No | A unique identifier is used to manage state and interaction |
name
|
any
| — | — | No | Name of input |
label
|
string
| — | — | No | — |
value
|
any
| — | — | No | Value of input |
field
|
Phoenix.HTML.FormField
| — | — | No | a form field struct retrieved from the form |
options
|
list
|
[]
| — | No | the options to pass to Phoenix.HTML.Form.options_for_select/2 |
errors
|
list
|
[]
| — | No | List of error messages to be displayed |
class
|
any
| — | — | No | Custom CSS class for additional styling |
placeholder
|
string
| — | — | No | Placeholder of field |
description_class
|
string
|
text-[12px]
| — | No | Custom classes for description |
label_class
|
string
| — | — | No | Custom CSS class for the label styling |
field_wrapper_class
|
string
| — | — | No | Custom CSS class field wrapper |
option_group_class
|
string
| — | — | No | Custom CSS class option group |
description_wrapper_class
|
string
| — | — | No | Custom classes for description wrapper |
search_placeholder
|
string
|
Search..
| — | No | Custom CSS class for additional styling |
color
|
string
|
natural
|
basenaturalprimarysecondarysuccesswarningdangerinfosilvermiscdawn
| No | Determines color theme |
variant
|
string
|
base
|
defaultborderedbase
| No | Determines variant theme |
border
|
string
|
extra_small
| — | No | Determines border style |
rounded
|
string
|
medium
|
extra_smallsmallmediumlargeextra_largefullnone
| No | Radius size |
space
|
string
|
extra_small
|
extra_smallsmallmediumlargeextra_largenone
| No | Space between elements |
padding
|
string
|
small
|
extra_smallsmallmediumlargeextra_large
| No | Padding size |
height
|
string
|
h-fit max-h-40
| — | No | Dropdown height |
description
|
string
| — | — | No | Determines a short description |
searchable
|
boolean
|
false
| — | No | Enables search functionality in the combobox |
multiple
|
boolean
|
false
| — | No | Multiple selections in the combobox |
creatable
|
boolean
|
false
| — | No | Enables creating new options from search input |
create_label
|
string
|
Create
| — | No | Label prefix for the create option button |
on_create
|
string
| — | — | No | Event name pushed to the server when a new option is created |
size
|
string
|
small
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
Slots
| Name | Required | Description |
|---|---|---|
start_section
| No | Renders heex content in start of an element |
option
| No | — |
Attributes of the start_section slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
class
|
any
| — | — | No | Custom CSS class for additional styling |
icon
|
string
| — | — | No | Icon displayed alongside of an item |
Attributes of the option slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
value
|
string
| — | — | Yes | Value of the select option |
class
|
any
| — | — | No | Value of the select option |
group
|
string
| — | — | No | Group name for the option |
disabled
|
boolean
| — | — | No | Specifies if this option is disabled |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
defaultborderedbase
|
--color
|
basenaturalprimarysecondarysuccesswarningdangerinfosilvermiscdawn
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--space
|
extra_smallsmallmediumlargeextra_largenone
|
--padding
|
extra_smallsmallmediumlargeextra_large
|
--rounded
|
extra_smallsmallmediumlargeextra_largefullnone
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component combobox