---
title: Label
description: Labels identify form inputs and controls.
icon: bookmark
---

import { ComponentPreview } from "/snippets/component-preview.mdx";

Labels provide accessible text descriptions for form fields.

## Basic Usage

Labels can contain text directly or wrap other components.

<ComponentPreview json={{"view":{"type":"Label","text":"Email address"}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgTGFiZWwKCkxhYmVsKCJFbWFpbCBhZGRyZXNzIikK">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Label

Label("Email address")
```
```json Protocol icon="brackets-curly"
{"view": {"type": "Label", "text": "Email address"}}
```
</CodeGroup>
</ComponentPreview>

## With Form Fields

Labels are typically paired with inputs and other form controls:

<ComponentPreview json={{"view":{"cssClass":"gap-2","type":"Column","children":[{"type":"Label","text":"Username","forId":"username"},{"name":"username","type":"Input","inputType":"text","placeholder":"Enter username","disabled":false,"readOnly":false,"required":false}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgQ29sdW1uLAogICAgSW5wdXQsCiAgICBMYWJlbCwKKQoKd2l0aCBDb2x1bW4oZ2FwPTIpOgogICAgTGFiZWwoIlVzZXJuYW1lIiwgZm9yX2lkPSJ1c2VybmFtZSIpCiAgICBJbnB1dChwbGFjZWhvbGRlcj0iRW50ZXIgdXNlcm5hbWUiLCBuYW1lPSJ1c2VybmFtZSIpCg==">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import (
    Column,
    Input,
    Label,
)

with Column(gap=2):
    Label("Username", for_id="username")
    Input(placeholder="Enter username", name="username")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-2",
    "type": "Column",
    "children": [
      {"type": "Label", "text": "Username", "forId": "username"},
      {
        "name": "username",
        "type": "Input",
        "inputType": "text",
        "placeholder": "Enter username",
        "disabled": false,
        "readOnly": false,
        "required": false
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Label Parameters">

<ParamField body="text" type="str | None" default="None">
  Label text content. Can be passed as a positional argument.
</ParamField>

<ParamField body="for_id" type="str | None" default="None">
  ID of the associated form field element.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes appended to the component's built-in styles.
</ParamField>
</Card>

## Protocol Reference

```json Label
{
  "type": "Label",
  "children?": "[Component]",
  "let?": "object",
  "text?": "string",
  "forId?": "string",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Label](/protocol/label).
