Select

Allows users to pick one value from a range of predefined items.

Attribute Type Documentation Default Value
class :string
placeholder :string "Select..."
on_change %JS{} Action triggered when item is selected
value :string
default_value :string
disabled :boolean false
required :any false
enable_clear :boolean true
rest :global
id :string "select"
name :string
enter :string CSS class to apply on enter transition "transition ease duration-100 transform"
enter_from :string CSS class to apply on enter from "opacity-0 -translate-y-4"
enter_to :string CSS class to apply on enter to "opacity-100 translate-y-0"
leave :string CSS class to apply on leave transition "transition ease duration-100 transform"
leave_from :string CSS class to apply on leave from "opacity-100 translate-y-0"
leave_to :string CSS class to apply on leave to "opacity-0 -translate-y-4"
icon :slot
<:icon>
  <.icon name="hero-cog" />
</:icon>

<:item>
  Audi
</:item>
<:item>
  BMW
</:item>
<:item>
  Mercedes
</:item>
<:item>
  Toyota
</:item>
item :slot
<:icon>
  <.icon name="hero-cog" />
</:icon>

<:item>
  Audi
</:item>
<:item>
  BMW
</:item>
<:item>
  Mercedes
</:item>
<:item>
  Toyota
</:item>