After click on the label box its shows the label text on the border of the label box and focus on the border. How to achieve this

General
1

In the form after click on the label box its shows the label text on the top of the border of the label box and focus on the border. How to achieve this .I provide the content link here : Builder.io: Visual Development Platform

2

Hi @Dhanashree,

Yes, this is possible in Builder using state and actions. You can bind an onClick event to the label box and use JavaScript and CSS to achieve this. For example, you can add a CSS class with onClick event, such as floating-label. Here’s an example of how you might implement it:

.input-container {
  position: relative;
  margin-top: 1.5rem; /* For spacing */
}

.floating-label {
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.2s ease all;
  pointer-events: none;
  color: #aaa;
}

input:focus ~ .floating-label,
input:not(:placeholder-shown):not(:focus) ~ .floating-label {
  top: -1rem;
  left: 0;
  font-size: 0.8rem;
  color: #673ab7;
}

input {
  border: 1px solid #ccc;
  padding: 0.5rem;
  font-size: 1rem;
  outline: none;
  border-radius: 0.25rem;
}

input:focus {
  border-color: #673ab7;
}

For further reference, you can explore the following guides:

I hope this helps! Let me know if you need further assistance.

Thanks,