View Source PineUi.Select (Pine UI v0.1.2)

Provides select components for dropdown selections.

The Select module offers three main variants:

Summary

Functions

Renders a basic select dropdown component.

Renders a select dropdown with option groups.

Renders a searchable select dropdown with filtering.

Functions

Renders a basic select dropdown component.

Examples

<.basic
  id="country"
  label="Country"
  options={[{"us", "United States"}, {"ca", "Canada"}]}
  selected="us"
/>

Options

  • :id - The ID for the select element (required)
  • :name - The name attribute (optional, defaults to ID)
  • :label - Label text (optional)
  • :options - List of {value, label} tuples for the options (required)
  • :selected - The currently selected value (optional)
  • :placeholder - Placeholder text for empty selection (optional)
  • :hint - Help text displayed below the select (optional)
  • :error - Error message displayed below the select (optional)
  • :required - Whether the field is required (optional, defaults to false)
  • :disabled - Whether the field is disabled (optional, defaults to false)
  • :phx_change - Phoenix change event name (optional)
  • :class - Additional CSS classes for the select element (optional)
  • :container_class - CSS classes for the container div (optional)

Renders a select dropdown with option groups.

Examples

<.grouped
  id="continent"
  label="Country"
  option_groups={[
    {"North America", [{"us", "United States"}, {"ca", "Canada"}]},
    {"Europe", [{"fr", "France"}, {"de", "Germany"}]}
  ]}
/>

Options

  • :id - The ID for the select element (required)
  • :name - The name attribute (optional, defaults to ID)
  • :label - Label text (optional)
  • :option_groups - List of {group_label, options} tuples (required)
  • :selected - The currently selected value (optional)
  • :placeholder - Placeholder text for empty selection (optional)
  • :hint - Help text displayed below the select (optional)
  • :error - Error message displayed below the select (optional)
  • :required - Whether the field is required (optional, defaults to false)
  • :disabled - Whether the field is disabled (optional, defaults to false)
  • :phx_change - Phoenix change event name (optional)
  • :class - Additional CSS classes for the select element (optional)
  • :container_class - CSS classes for the container div (optional)

Renders a searchable select dropdown with filtering.

Examples

<.searchable
  id="country"
  label="Country"
  options={[{"us", "United States"}, {"ca", "Canada"}]}
  placeholder="Search..."
/>

Options

  • :id - The ID for the select element (required)
  • :name - The name attribute (optional, defaults to ID)
  • :label - Label text (optional)
  • :options - List of {value, label} tuples for the options (required)
  • :selected - The currently selected value (optional)
  • :selected_label - The label for the selected value (optional)
  • :placeholder - Placeholder text for the search (optional)
  • :hint - Help text displayed below the select (optional)
  • :error - Error message displayed below the select (optional)
  • :required - Whether the field is required (optional, defaults to false)
  • :disabled - Whether the field is disabled (optional, defaults to false)
  • :phx_change - Phoenix change event name (optional)
  • :class - Additional CSS classes for the select element (optional)
  • :container_class - CSS classes for the container div (optional)