This can be done through CSS but it is not ideal due to needing to populate the placeholder attribute, on the input you need to populate the placeholder with a space (this makes sure when data is entered it and you unfocus it then it stays away) and with whatever label you need. Then apply the fancy-input class to the input, this class is defined as follows:
.fancy-input{
position:relative;
display: flex;
flex-wrap: wrap;
margin-bottom:0;
width:100%;
> label.control-label{
position: absolute;
left: 8px;
top: 12px;
max-width: calc(100% - 16px);
line-height: 24px;
transition: all .3s;
pointer-events: none;
z-index: 1;
margin: 0px;
color:$neutral-14;
}
&:has(input:focus) > label.control-label,
&:has(input:focus):valid > label.control-label,
&:has(input:not(:placeholder-shown)) > label.control-label,
&:has(textarea:focus) > label.control-label,
&:has(textarea:focus):valid > label.control-label,
&:has(textarea:not(:placeholder-shown)) > label.control-label,
&:has(.widget-combobox-text):not(:has(.widget-combobox-placeholder-empty)) > label.control-label
{
position: absolute;
left: 8px;
top: 8px;
max-width: calc(100% - 16px);
height: 14px;
line-height: 14px;
pointer-events: none;
font-size: 12px;
font-weight: 400;
}
&:has(input:not(:focus)):valid .widget-combobox-placeholder-empty > .widget-combobox-caption-text,
&:has(input:not(:focus)) .widget-combobox-placeholder-empty > .widget-combobox-caption-text,
&:has(input:not(:focus)):valid .widget-combobox-placeholder-empty,
&:has(input:not(:focus)) .widget-combobox-placeholder-empty
{
color:transparent;
}
&:has(.widget-combobox-placeholder-empty):has(input:focus) .widget-combobox-placeholder-text.widget-combobox-placeholder-empty
{
color:$neutral-14;
}
.form-control{
padding-bottom: 7px;
line-height: 14px;
border:0;
box-shadow: inset 0 0 0 .0625rem $form-input-border-color;
margin-bottom: 16px;
&.widget-combobox-input-container{
padding:0px;
padding-right:8px;
box-shadow: inset 0 0 0 .0625rem $form-input-border-color;
& .widget-combobox-input{
background-color: transparent;
}
}
}
input.form-control,
input.widget-combobox-input
{
padding-top:22px;
}
> textarea.form-control{
padding-top:26px;
}
.widget-combobox-selected-items{
border:0;
&> .widget-combobox-input{
padding: 22px 8px 7px 8px;
}
&> .widget-combobox-placeholder-text{
padding: 24px 8px 5px 8px;
> span{
font-size: 16px;
}
}
}
}
You may need to replace some of the color variables with your own. THis should give you this behaviour with the label (the shadow is from our input styling):
It is compatible with inputs, comboboxes, and text areas.