Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.


Floating Labels in Chakra-UI. This topic has come up a couple of times, and given that it has a11y advantages and it is a very popular style, I think it should be part of Chakra-UI. Either as a Guide or as part of the Library.

See more: chakra-ui/chakra-ui#1744 chakra-ui/chakra-ui#5120

Problem Statement/Justification

This topic came up a couple of times, but I haven’t found a solution posted yet.

Proposed Solution or API

Add floating as a variant to FormControl form.ts Sample:

export default {
  parts: parts.keys,
  variants: {
    floating: {
      container: {
        _focusWithin: {
          label: {
            transform: "scale(0.825) translateY(-24px) translateX(-10px)",
        "input:not(:placeholder-shown) + label": {
          transform: "scale(0.825) translateY(-24px) translateX(-10px)",
        label: {
          top: 0,
          left: 0,
          zIndex: 2,
          position: "absolute",
          backgroundColor: "white",
          mx: 3,
          px: 1,
          my: 2,


 <FormControl variant="floating" id="first-name" isRequired isInvalid>
    <Input placeholder=" " /> // <- Input needs to be before FormLabel for CSS Selector
    <FormLabel>First name</FormLabel>
    <FormHelperText>Keep it very short and sweet!</FormHelperText>
    <FormErrorMessage>Your First name is invalid</FormErrorMessage>


As @segunadebayo recommended in a previous ticket, this could go in as a Guide / Recipe.

Additional Information

I have built this with various approaches in client projects at this point and I figured I can put a more formal solution together to bring back into the library. Just let me know which route you want to go and I can toss something together.

Admittedly, i am a bit worried how stable it will be as part of the library, since some of the properties will be dependent on input styles. Which makes this a safer addition as a guide.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:4
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

Patrick-Ullrichcommented, Jan 16, 2022

@a-rezz The PR has examples for <Select, <Textarea, and <Input. Let me know if you were looking for anything else.

The key for selects is to add something for .chakra-select__wrapper + label.

Full example is here:

a-rezzcommented, Jan 12, 2022

Thanks for your work on this and helping make a solution more visible to the community. I’ll let you know if I have any ideas or come up with something for Select. Been trying to work out a css solution as well

Read more comments on GitHub >

github_iconTop Results From Across the Web

Floating labels · Bootstrap v5.0
Create beautifully simple form labels that float over your input fields. On this page. Example; Textareas; Selects; Layout; Sass. Variables. Example. Wrap ...
Read more >
Bootstrap 5 Form Floating Labels - W3Schools
Floating Labels / Animated Labels. By default, when using labels, they normally appear on top of the input field: Email Label. With floating...
Read more >
Float Labels with CSS
Float Labels with CSS ... You've probably seen this pattern going around. It's an input that appears as if it has placeholder text...
Read more >
Floating Label - Material Design
Floating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text...
Read more >
Why Infield Top-Aligned Labels Beat Floating Labels
When floating labels transition from the placeholder to top-aligned position, the text label typically shrinks and becomes tiny.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found