PineUiPhoenix.Select (Pine UI v0.1.3)
View SourceProvides select components for dropdown selections.
The Select module offers three main variants:
basic/1
- Standard select dropdowngrouped/1
- Select with option groupssearchable/1
- Enhanced select with search functionality
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)