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

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

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

It is always important to provide feedback to the user. When the user has
inserted content, we validate it. This validation can be false or correct.
This feedback can be shown through the use of these states:

- is-error
- is-warning
- is-succes

{% endset %}

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

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

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

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

{% endset %}

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

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

{% endset %}