Floating Label Textfield

[godfrednanaowusu]

Isn't it high time, we had Floating Label Textfield.

I tried achieving this with just the current Textfield.Root and nothing more, and I must say it was hell.

What I achieved so far:

1. I was able to animate and reduce the font size of placeholders to the right position
2. I did not require any extra component but just the existing placeholders

What I failed to achieve:

1. due to the the placeholder not being a DOM element, I could not z-index the placeholder over the input, it was always under the input (like overflow:hidden)
2. I could not keep the placeholder visible at all times, when typing started or when input had values
3. I could not mask the space around the placeholder from the borderline of the input (my css knowledge limitation)

I wish there was a inbuilt way to do this maybe with variant='surface-float' or variant='classic-float' or variant='soft-float'

Does anyone have a stronger knowledge or opinion on this topic, and is it something worth working on?

[keithburgie]

For the reasons you've noted and more, it would be better to use a label than a placeholder.

I made you an example here: https://stackblitz.com/edit/vitejs-vite-mxcqsl?file=src%2FApp.css

To replicate:

// Give your form field a className:
<Form.Field
  className="field"
  name="email"
  serverInvalid={serverErrors.email}
>

/** Stack your fields **/

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/** Stack your inputs and labels **/

.field {
  display: flex;
  flex-direction: column;
  align-items: start;
  position: relative; // <-- important for absolutely positioned children
}

/**  Initially set the label to look like a placeholder **/

.field label {
  font-size: 0.9em;
  margin-left: 0.25em;
  opacity: 0.5;
  position: absolute;
  transition: all 0.2s ease-out;
}

/** When the input has focus, make the label "float" **/

.field:has(input:focus) label {
  transform: translateY(-0.75rem); // <-- move the label up
  font-size: 0.75em; // <-- reduce the size
  background: white; // <-- cover the border of the input
  opacity: 1;
  padding: 1px 2px; // <-- create some space for the white "border"
}