Floating

A text label which sits inside the input field at full font-size. When the input is clicked on, the label floats above, making room for the user to input a value.

Props

children

Reactnode

required

Must pass Input and Label as children.

className

String | undefined

Pass it any class to extend styling.

Basic usage

Name

 
<Floating>
  <Floating.Input
    id="name"
    name="name"
    placeholder="John Smith"
    color="tomato"
    border={1}
    borderBottom
  />
  <Floating.Label htmlFor="name" color="tomato">
    Name
  </Floating.Label>
</Floating>