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

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

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

Sometimes it is difficult for the user to understand what value has to be
inserted when looking at just the label. In order to help the user we can
provide a small bit of information to help him further understand what we
expect to be inserted. **IMPORTANT TO NOTE** is to keep this as short as
possible.

{% endset %}

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

	{{input.default("", {
		label: { text: "Text input with info" },
		id: "components-input-with-info-1",
		name: "components-input-with-info-1",
		input: { type: "text", placeholder: "placeholder" },
		info: { text: "This is info about the input field" }
	})}}

	{{input.select("", {
		label: { text: "Select field" },
		id: "components-input-with-info-2",
		name: "components-input-with-info-2",
		input: {
			placeholder: "placeholder",
			items: [
				{ text: "item 1" },
				{ text: "item 2" },
				{ text: "item 3" }
			]
		},
		info: { text: "This is info about the select field" }
	})}}

	{{input.textarea("", {
		label: { text: "Textarea" },
		id: "components-input-with-info-3",
		name: "components-input-with-info-3",
		input: { placeholder: "placeholder" },
		info: { text: "This is info about the select field" }
	})}}

{% endset %}

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

	{{input.default("", {
		label: { text: "Text input with info" },
		id: "components-input-with-info-4",
		name: "components-input-with-info-4",
		input: { type: "text", placeholder: "placeholder" },
		info: { text: "This is info about the input field" }
	})}}

{% endset %}