Label and field componentAvailable since EcoComposer 2.2

Label and field examples
Default SCSS values
SCSS implementation
HTML implementation

Classical Label and field example :

Name

Age

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>