{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "general/building-blocks/input/input-macros.njk" as input %}

{# ========================================================================== #}
{# :: Settings #}
{# ========================================================================== #}
{% set params = {
	isFullWidth: false,
	styleVendors: [],
	scriptVendors: ["https://kit.fontawesome.com/74199cd914.js"],
	order: 2,
	scope: "s-bp-input"
} %}

{# ========================================================================== #}
{# :: Info #}
{# ========================================================================== #}
{% set info %}

An input can also be a select field, providing the user with different options
to select from.

{% endset %}

{# ========================================================================== #}
{# :: Preview #}
{# ========================================================================== #}
{% set preview %}

	{{input.select("", {
		label: { text: "Select field" },
		id: "components-input-select-1",
		name: "components-input-select-1",
		input: {
			placeholder: "placeholder",
			icon: "far fa-chevron-down",
			options: [
				{ text: "item 1" },
				{ text: "item 2" },
				{ text: "item 3" }
			]
		}
	})}}

{% endset %}

{# ========================================================================== #}
{# :: Code #}
{# ========================================================================== #}
{% set code %}

	{{input.select("", {
		label: { text: "Select field" },
		id: "components-input-select-3",
		name: "components-input-select-3",
		input: {
			placeholder: "placeholder",
			options: [
				{ text: "item 1" },
				{ text: "item 2" },
				{ text: "item 3" }
			]
		}
	})}}

{% endset %}