# 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

**URL:** <https://forum.builder.io/t/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/7172>\
**Category:** General\
**Created:** [January 16, 2025, 10:09am UTC](https://forum.builder.io/t/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/7172 "2025-01-16T10:09:18Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [January 21, 2025, 11:47am UTC](https://forum.builder.io/t/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/7172/2 "2025-01-21T11:47:13Z")

</div>

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:

```css
.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;
}

```

> [@I want to capture the onClick event and get the id value of a row](https://forum.builder.io/t/i-want-to-capture-the-onclick-event-and-get-the-id-value-of-a-row/6238/2):
>
> Hello @Kenz, You can capture the id value of row using the builder state and action Action handlers introduce an additional object you can access: event. This event object represents the HTML event triggered by the selected action. You can leverage event to access the event’s target element or invoke methods such as preventDefault or stopPropagation: // access the value attribute (ie from an input) // and store it in builder state state.someStateProp = event.currentTarget.value; // if you h…

For further reference, you can explore the following guides:

- [State and Actions in Builder](https://www.builder.io/c/docs/guides/state-and-actions)
- [Custom Code in Builder](https://www.builder.io/c/docs/guides/custom-code)

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

Thanks,

---

_[View the full topic](https://forum.builder.io/t/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/7172)._