Label and field componentAvailable since EcoComposer 2.2

Classical Label and field example :

The default values are :

$-default--light--field--color : #333; $-default--light--field--color--hover : #33b; $-default--light--field--color--focus : #55b; $-default--light--field--color--focus-visible : #55b; $-default--light--field--color--valid : #3b3; $-default--light--field--color--invalid : #b33; $-default--dark--field--color : #eee; $-default--dark--field--color--hover : #55d; $-default--dark--field--color--focus : #77e; $-default--dark--field--color--focus-visible : #77e; $-default--dark--field--color--valid : #5d5; $-default--dark--field--color--invalid : #d55; border-radius : 5px, horizontal-gap : 1rem * theming.$font-size, field-padding : .5rem * theming.$font-size 1rem * theming.$font-size, font-family : theming.$font-family, label-width : 9.5rem * theming.$font-size, label-and-field--border : 'label-and-field--border', label-and-field--border--hover : 'label-and-field--border--hover', label-and-field--border--focus : 'label-and-field--border--focus', label-and-field--border--focus-visible : 'label-and-field--border--focus-visible', label-and-field--border--valid : 'label-and-field--border--valid', label-and-field--border--invalid : 'label-and-field--border--invalid', label-and-field--box-shadow : 'label-and-field--box-shadow', label-and-field--box-shadow--hover : 'label-and-field--box-shadow--hover', label-and-field--box-shadow--focus : 'label-and-field--box-shadow--focus', label-and-field--box-shadow--focus-visible : 'label-and-field--box-shadow--focus-visible', label-and-field--box-shadow--valid : 'label-and-field--box-shadow--valid', label-and-field--box-shadow--invalid : 'label-and-field--box-shadow--invalid', label-and-field--color : 'label-and-field--color', print : false, required-label : '*', suffix : '', themes : ( light : ( default--label-and-field--border : 1px solid lighten($-default--light--field--color, 0.3), default--label-and-field--border--hover : 1px solid lighten($-default--light--field--color--hover, 0.3), default--label-and-field--border--focus : 1px solid lighten($-default--light--field--color--focus, 0.3), default--label-and-field--border--focus-visible : 1px solid lighten($-default--light--field--color--focus-visible, 0.3), default--label-and-field--border--valid : 1px solid lighten($-default--light--field--color--valid, 0.3), default--label-and-field--border--invalid : 1px solid lighten($-default--light--field--color--invalid, 0.3), default--label-and-field--box-shadow : 0 0 .5rem * theming.$font-size $-default--light--field--color, default--label-and-field--box-shadow--hover : 0 0 .75rem * theming.$font-size $-default--light--field--color--hover, default--label-and-field--box-shadow--focus : 0 0 .5rem * theming.$font-size $-default--light--field--color--focus, default--label-and-field--box-shadow--focus-visible : 0 0 .5rem * theming.$font-size $-default--light--field--color--focus-visible, default--label-and-field--box-shadow--valid : 0 0 .5rem * theming.$font-size $-default--light--field--color--valid, default--label-and-field--box-shadow--invalid : 0 0 .5rem * theming.$font-size $-default--light--field--color--invalid, default--label-and-field--color : #333, ), dark : ( default--label-and-field--border : 1px solid lighten($-default--dark--field--color, 0.3), default--label-and-field--border--hover : 1px solid lighten($-default--dark--field--color--hover, 0.3), default--label-and-field--border--focus : 1px solid lighten($-default--dark--field--color--focus, 0.3), default--label-and-field--border--focus-visible : 1px solid lighten($-default--dark--field--color--focus-visible, 0.3), default--label-and-field--border--valid : 1px solid lighten($-default--dark--field--color--valid, 0.3), default--label-and-field--border--invalid : 1px solid lighten($-default--dark--field--color--invalid, 0.3), default--label-and-field--box-shadow : 0 0 .5rem * theming.$font-size $-default--dark--field--color, default--label-and-field--box-shadow--hover : 0 0 .5rem * theming.$font-size $-default--dark--field--color--hover, default--label-and-field--box-shadow--focus : 0 0 .5rem * theming.$font-size $-default--dark--field--color--focus, default--label-and-field--box-shadow--focus-visible : 0 0 .5rem * theming.$font-size $-default--dark--field--color--focus-visible, default--label-and-field--box-shadow--valid : 0 0 .5rem * theming.$font-size $-default--dark--field--color--valid, default--label-and-field--box-shadow--invalid : 0 0 .5rem * theming.$font-size $-default--dark--field--color--invalid, default--label-and-field--color : #ccc ) )

We can implement it that way :

@include labelAndField.init(); @include labelAndField.create( ( 'border-radius' : 5px, 'horizontal-gap' : 1rem, 'field-padding' : .5rem 1rem, 'label-width' : 9.5rem, 'suffix' : '-2', 'themes': $themes ) );

We can implement it that way :

<div class=field-group> <label for=my-field class="label required">Name</label> <input id=my-field class=field required /> </div>
^