The primary select component.

This component attempts to provide a fully featured dropdown/select element with native support for searching along with multiple select mode out of the box.

Select compatibility

While this component provides 1-1 API compatibility the the more simpler Elemental.DataInput.Select.select/1, augmenting it with additional features and interactivity, there's the caveat that it does not yet support option groups.

To use the browser's native <select> element you can pass the native attribute.

Attributes

• options (:list) (required) - The list of values to select between. This is required to either be a list of strings, or a list of string tuples.

  List item types

  • If given as a list of strings ([String.t]) each option will use that value as both it's label and value sent to from the dropdown.
  • If give as a list of tuples ([{String.t, String.t}]), those tuples are expected to be two strings, the first being the label to use, while the second is expected to be the value to send from the dropdown.
  • Mixing the two forms is allowed.

• prompt (:string) - The prompt to display for the the dropdown.

  This value is replaced when a selection is made with the selected item's label.

  Defaults to nil.

• name (:string) - The name of the dropdown, if not given a random value is selected.

• value (:any) - A value that is selected currently by the component.

  Useful for either preselecting items or to maintaining selected items state across rerenders.

  Type

  • The type is required to either be a single string or a list of strings, the values of it should correspond to the value (not label) of the options (if using a list of strings then it's the same as label).
  • If the type is single select and if the value is a list of more than one item this will raise an error.

  Defaults to nil.

• multi (:boolean) - To enable selection of multiple values, passed to consumer as a list. Defaults to false.

• native (:boolean) - Renders a native <select> element if enabled.

  This option is ignored if multi or multiple options are passed.

  Multiple selection and searchability features are ignored with this.

  Styling won't be controllable and will be limited to whatever the browser does per operating system.

  Defaults to false.

• multiple (:boolean) - Only present for compatibility, if true enables multi. Defaults to false.

• searchable (:boolean) - To enable searching the options of the dropdown.

  Ignored if native is passed.

  Search is performed by looking through the labels for the given input as substring to match on, if it doesn't match the option is disabled, deselected, and hidden.

  Notes:

  • Search is case-insensitive.
  • This features JavaScript enabled in the browser along with Hooks enabled.

  Defaults to false.

• searchable-inline (:boolean) - To enable inlining of the search field for the dropdown.

  Ignored if native is passed.

  Implies searchable if enabled.

  Defaults to false.

• align (:string) - Specify the alignment for the dropdown.

  Ignored if native is passed.

  Defaults to "start".

• from (:string) - Specify where the dropdown will appear from.

  Ignored if native is passed.

  Defaults to "bottom".

• hover (:boolean) - To enable opening the dropdown on hover.

  Ignored if native is passed.

  Defaults to false.

• open (:boolean) - To open the dropdown immediately.

  Ignored if native is passed.

  Defaults to false.

• color (:string) - The dropdown prompt container color.Must be one of "ghost", "neutral", "primary", "secondary", "accent", "info", "success", "warning", or "error".

• size (:string) - The dropdown prompt container size.Must be one of "xs", "sm", "md", "lg", or "xl".

• class (:string) - Additional CSS classes to pass to the dropdown.

  Those will be applied to the the dropdown prompt container since it's the "visible"/"interactive" bit of the dropdown.

  Defaults to nil.

• Global attributes are accepted.