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

{# ========================================================================== #}
{# :: Settings #}
{# ========================================================================== #}
{% set params = {
	isFullWidth: false,
	styleVendors: [],
	scriptVendors: [],
	order: 4,
	scope: "s-bp-input"
} %}

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

An input field can be supported by an icon, which helps identify the inserted
content. For example: a calender to indicate a date picker.

{% endset %}

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

	{{input.default("", {
		label: { text: "Text input with icon" },
		id: "components-input-with-icon-1",
		name: "components-input-with-icon-1",
		input: { type: "text", placeholder: "placeholder", icon: "icon-arrow-down" }
	})}}

	{{input.default("", {
		label: { text: "Disabled input" },
		isDisabled: true,
		id: "components-input-with-icon-2",
		name: "components-input-with-icon-2",
		input: { type: "text", placeholder: "placeholder", icon: "icon-arrow-down" }
	})}}

{% endset %}

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

	{{input.default("", {
		label: { text: "Text input with icon" },
		id: "components-input-with-icon-3",
		name: "components-input-with-icon-3",
		input: { type: "text", placeholder: "placeholder", icon: "icon-arrow-down" }
	})}}

{% endset %}