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
|
|
|
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
|
|
rest
|
:global
|
|
|
|