Input Frame

No notes defined.

<div class="sds-input">
    <input id="" class="sds-input form-control" type="" placeholder="" value="">

</div>
<div class="{{ namespace }}input{% for mod in parentModifiers %} {{ mod }}{% endfor %}{% for mod in parentClasses %} {{ mod }}{% endfor %}">
	<input id="{{ id }}" class="{{ namespace }}input form-control{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" type="{{ type }}" placeholder="{{ placeholder }}" value="{{ value }}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %}{% if error %} aria-invalid="true"{% endif %}{% if error or hint %} aria-describedby="{% if hint %}{{ hintID }}{% endif %}{% if error %} {{ errorID }}{% endif %}"{% endif %}>
	{% if search %}
		<div class="{{ namespace }}input__searchActions">
			<div class="{{ namespace }}input__clearBtn">
				{% render "@icon-btn-secondary--ghost",{
					icon: "icon-close",
					classes: ["-smaller"]
				},true %}
			</div>
			<div class="{{ namespace }}input__searchBtn">
				{% render "@btn-secondary",searchbtnOptions,true %}
			</div>
		</div>
	{% endif %}
	{% if shadow %}
		<div class="{{ namespace }}input__shadowInput form-control" aria-hidden="true">
			<div class="{{ namespace }}input__shadowValue">
				{{ value }}
			</div>
			<div class="{{ namespace }}input__shadowCurrency">
				{{ valueType }}
			</div>
		</div>
	{% endif %}
	{% if icon %}
		<div class="{{ namespace }}input__iconRight{% if button %} -isButton{% endif %}">
			{% if button %}
				{% render "@icon-btn-secondary--ghost",{
					icon: "icon-trash",
					disabled: disabled
				},true %}
			{% else %}
				<span class="{{ namespace }}icon {{ namespace }}{{ icon }}"></span>
			{% endif %}
		</div>
	{% endif %}
	{% if iconLeft %}
		<div class="{{ namespace }}input__iconLeft">
			<span class="{{ namespace }}icon {{ namespace }}{{ iconLeft }}"></span>
		</div>
	{% endif %}
	{% if error %}
		<div class="invalid-feedback">
			{% render "@hint--error",{
				text: feedback,
				attrs: {
					id: errorID
				}
			},true %}
		</div>
	{% endif %}
	{% if hint %}
		<div class="{{ namespace }}input__hint">
			{% render "@hint",{
				text: hint.feedback,
				attrs: {
					id: hintID
				}
			},true %}
		</div>
	{% endif %}
	{% if message %}
		{% render '@message' %}
	{% endif %}
</div>