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 defaults 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>