Merge label on top left corner of Input border

[28122001]

I Want input with label like this .please help to achieve this by xml viewer

Here is my simple form code

<f:SimpleForm editable="true" layout="ResponsiveGridLayout" labelSpanXL="12" labelSpanL="12" labelSpanM="12" labelSpanS="12"
adjustLabelSpan="false" emptySpanXL="0" emptySpanL="0" emptySpanM="0" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="false" class="sapUiNoMarginTop" >
	<f:content>
		<core:Title/>
		<Label text="Enter your ID"  class="sapUiNoMarginTop"/>
		<Input value="{/UserId}" width="100%" class="inputDesign"  valueState="None" liveChange="onLive"/>
		<Label text="Enter your Password" class="sapUiSmallMarginTop"/>
		<Input value="{/Password}" liveChange="onLive" width="100%" showValueHelp="true" valueHelpRequest="onPassword"  />
	</f:content>
</f:SimpleForm>

css

.sapUiForm .sapUiFormElementLbl>.sapMLabel {
    height: auto;
    position: relative;
    top: 0.5rem;
    margin: 0 0 0 7px;
    width: fit-content;
    padding: 0 3px;
}

Output for form

[boghyon]

Since you have added the tag "SAP Fiori"; are you planning to create a freestyle app? Or would your future users prefer following the SAP Fiori design guidelines so that your app is consistent with other Fiori apps?

[pablos81]

<VBox class="MainVBox">

                            <VBox class="LabelVox">

                                <Label text="Enter your ID"  class="sapUiNoMarginTop"/>

                            </VBox>

                            <VBox class="InputVBox">

                                <Input value="{/UserId}" width="100%" class="inputDesign"  valueState="None" liveChange="onLive"/>

                            </VBox>

                        </VBox>

                        <Label text="Enter your Password" class="sapUiSmallMarginTop"/>

                        <Input value="{/Password}" liveChange="onLive" width="100%" showValueHelp="true" valueHelpRequest="onPassword"  />

.MainVBox {

    width: 15rem;

    border: solid blue;

    border-radius: 9px;

    height: 4rem;

}

.InputVBox {

    position: absolute;

    top: 5rem;

    left: 2rem;

}

.LabelVox {

    position: absolute;

    top: 2.5rem;

    left: 2rem;

    padding: 0.5rem;

    background: white;

}

.MainVBox .sapMInputBaseContentWrapper:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState){

    box-shadow: none

}

.MainVBox .sapMInputBaseContentWrapper {

    background: 0

}