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.

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>

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

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

Mishka

Overview of combobox component

Base variant

Default variant

Bordred variant

Label prop

Description prop

Rounded prop

Border prop

Padding prop

Space prop

Size prop

Searchable prop

Searchable prop

Group Combobox

Multi Select

Real world example

Full Name

Select your area of expertise

Do you accept terms and conditions?

Combobox Component Props

Combobox CLI Arguments