Form Group

No notes defined.

<!-- Default -->
<div class="form-group">
    <label for="" class="sds-label -labelForm">
        Label

    </label>
    <div class="sds-input">
        <input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">

    </div>
</div>


<!-- Optional -->
<div class="form-group">
    <label for="" class="sds-label -labelForm -labelOptional">
        Label

        <span class="sds-label__helper">Optionnel</span>

    </label>
    <div class="sds-input">
        <input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">

    </div>
</div>


<!-- Select -->
<div class="form-group">
    <label for="" class="sds-label -labelForm">
        Select Label

    </label>
    <div class="sds-select">
        <select id="" class="sds-select form-control">

            <option value="opt-0">Option 1</option>

            <option value="opt-1">Option 2</option>

            <option value="opt-2">Option 3</option>

        </select>
        <span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>

    </div>

</div>


<!-- Shadow Action -->
<div class="form-group">
    <label for="" class="sds-label -labelForm">
        Label

    </label>
    <div class="sds-input -hasShadow">
        <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">

        <div class="sds-input__shadowInput form-control" aria-hidden="true">
            <div class="sds-input__shadowValue">
                4000
            </div>
            <div class="sds-input__shadowCurrency">
                €
            </div>
        </div>

    </div>
</div>


<!-- Textarea -->
<div class="form-group">
    <label for="" class="sds-label -labelForm -labelOptional">
        Label

        <span class="sds-label__helper">Optionnel</span>

    </label>
    <div class="sds-textarea">
        <textarea class="form-control" id="" rows="1" placeholder=""></textarea>

    </div>

</div>


<!-- Default -->
<div class="form-group{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@label--form",{
		text: labelText,
		labelFor: for
	},true %}
	{% render "@input",{
		id: for,
		placeholder: placeholder,
		value: value,
		disabled: disabledState,
		error: errorState
	},true %}
</div>

<!-- Optional -->
<div class="form-group{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    {% render "@label--optional",{
        text: labelText
    },true %}
    {% render "@input",{
        placeholder: placeholder,
        value: value,
        disabled: disabledState,
        error: errorState
    },true %}
</div>

<!-- Select -->
<div class="form-group{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@label--form",{text: labelText },true %}
	{% render "@select" %}
</div>

<!-- Shadow Action -->
<div class="form-group{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    {% render "@label--form",{
        text: labelText,
        labelFor: for
    },true %}
    {% render "@input--shadow",{
        id: for,
        placeholder: placeholder,
        value: value
    },true %}
</div>

<!-- Textarea -->
<div class="form-group{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    {% render "@label--optional", {
		labelFor: for,
        text: labelText,
        textOptional: textOptional
    },true %}
    {% render "@textarea", {
		labelFor: for,
        placeholder: placeholder,
        value: value,
        disabled: disabledState,
        error: errorState
    },true %}
</div>