---
title: Add a Floating Label to an Input
description: To add a floating label to an input component in Chakra UI...
publishedAt: "2024-10-19"
collection: components
---

Floating labels conserve space in forms, particularly on mobile devices where
screen space is limited.

To add a floating label to an input component in Chakra UI, create a styled
input field using the `Field`, `Input`, and `Box` components.

<ExampleTabs name="input-with-floating-label" />

> For more details on Chakra UI's input component, refer to the
> [documentation](/docs/components/input).
