Combo-box
A dynamic, stylish and feature-rich combo-box as a HEEX component.
Create new option
The user can create a brand new option if they like.
<.combo_box
create
label="Pick your favourite fruit"
options={["Apple", "Banana", "Orange", "Pineapple", "Strawberry"]}
field={@form[:fruit]}
/>
Disabled
Disabled works like any other field.
<.combo_box
disabled
label="Pick your favourite fruit"
options={["Apple", "Banana", "Orange", "Pineapple", "Strawberry"]}
field={@form[:fruit]}
/>
Max items
Set the max number of items that can be selected.
<.combo_box
label="Pick your favourite fruit"
max_items={2}
options={["Apple", "Banana", "Orange", "Pineapple", "Strawberry"]}
field={@form[:fruit]}
/>
Placeholder
Placeholder text similar to a normal text input.
<.combo_box
placeholder="AI will take our jobs :("
label="Pick your favourite fruit"
options={["Apple", "Banana", "Orange", "Pineapple", "Strawberry"]}
field={@form[:fruit]}
/>
Option groups
<.combo_box
options={[Birds: ["Eagle", "Seagull"], Animals: ["Dog", "Rhino"]]}
label="Pick your favourite fruit"
field={@form[:fruit]}
/>
Plugins
You can toggle plugins and pass options to them.
See https://tom-select.js.org/plugins for available plugins. We have enabled two by default: “Remove button” and “Checkbox options” for multiple selects. You can disable them though:
Disable remove button
<.combo_box
tom_select_plugins={%{remove_button: false}}
multiple
label="Pick your favourite fruit"
options={["Apple", "Banana", "Orange", "Pineapple", "Strawberry"]}
field={@form[:fruit]}
/>
Drag and drop
Note that this requires jQuery and jQueryUI. We've made it so these libraries will automatically be fetched from a CDN if the `drag_drop` plugin is enabled.
<.combo_box
tom_select_plugins={%{drag_drop: true}}
label="Pick your favourite fruit"
options={["Apple", "Banana", "Orange", "Pineapple", "Strawberry"]}
field={@form[:fruit]}
/>
Customization
You can copy the CSS into your own project:
cp deps/petal_framework/assets/css/combo-box.css ./assets/css
Then modify your `app.css` to point to it.
@import "tailwindcss/base";
@import "../../deps/petal_components/assets/default.css";
@import "combo-box.css"; /* <-- Add this line */
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Now you can customize `combo-box.css` to your needs.
Note that we also use styles from Petal Components for the label, help text and errors.