Select

Attribute Type Documentation Default Value
id :string

The component ID

form :any

The form around the input group.

field :atom

The form field key.

name :string

The form field name.

label :string

The input label

placeholder :string

The input placeholder

hint :string

An hint to display below the input

mode :atom

Select can be a single or multiple values input

:single
options :list

Select options can either be given directly with assigns (using options) or be pushed to client when the client is typing (see options_phx_event below). You can also mix both to prevent the “empty list effect” when the select get focus but the user did not type anything yet: you just need to pass a limited set of options to options

options_phx_event :string

Name of the phx event that will be triggered to retrieve options as user is typing. The event will be triggered every time user is typing with user input as a value. You should then be returning a structure like this: {options: [{id: 1, value: “option 1”}, …]}

options_preserve_value :boolean

When true, the selected options are fully serialized as JSON in input value attribute. By default value is formatted as a comma separated list of option ids

false
options_phx_target :string

The LiveComponent or Liveview to send the event to.

value :any

The current selected item. Can be a single value, a list of id or a list of options.

disabled :boolean

Set to true to disable the input.

false
readonly :boolean

Set to true to make the input readonly (will be submitted).

false
group_class :string

Extend input group class

label_class :string

Extend label class

wrapper_class :string

Extend input wrapper class

hint_class :string

Extend input hint class

enabled_groups :list

List of option group ids that are enabled. Related to can_be_disabled_by.

can_be_disabled_by :atom

Key used in option to determine if the options is among the disabled options.

validate? :boolean

Validate options flag

true
select_hide_clear_button :boolean

Only working for single select input

false
rest :global