---
title: Label
description: Renders an accessible label associated with controls.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/checkbox"
	"github.com/axadrn/shadcn-templ/v2/components/label"
)

templ LabelDemo() {
	<div class="flex gap-2">
		@checkbox.Checkbox(checkbox.Props{ID: "terms"})
		@label.Label(label.Props{For: "terms"}) {
			Accept terms and conditions
		}
	</div>
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add label
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="label" title="components/label/label.templ" />

<ComponentSource name="label" title="components/label/label.js" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/label"
```

```templ showLineNumbers
@label.Label(label.Props{For: "email"}) {
	Your email address
}
```

## Label in Field

For form fields, use the [Field](/docs/components/field) component which includes built-in `field.Label`, `field.Description`, and `field.Error` components.

```templ showLineNumbers
@field.Field() {
	@field.Label(field.LabelProps{For: "email"}) {
		Your email address
	}
	@input.Input(input.Props{ID: "email"})
}
```

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/checkbox"
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
	selectcomp "github.com/axadrn/shadcn-templ/v2/components/select"
	"github.com/axadrn/shadcn-templ/v2/components/textarea"
)

templ FieldDemo() {
	<div class="w-full max-w-md">
		<form>
			@field.Group() {
				@field.Set() {
					@field.Legend() {
						Payment Method
					}
					@field.Description() {
						All transactions are secure and encrypted
					}
					@field.Group() {
						@field.Field() {
							@field.Label(field.LabelProps{For: "checkout-7j9-card-name-43j"}) {
								Name on Card
							}
							@input.Input(input.Props{
								ID:          "checkout-7j9-card-name-43j",
								Placeholder: "Axel Adrian",
							})
						}
						@field.Field() {
							@field.Label(field.LabelProps{For: "checkout-7j9-card-number-uw1"}) {
								Card Number
							}
							@input.Input(input.Props{
								ID:          "checkout-7j9-card-number-uw1",
								Placeholder: "1234 5678 9012 3456",
							})
							@field.Description() {
								Enter your 16-digit card number
							}
						}
						<div class="grid grid-cols-3 gap-4">
							@field.Field() {
								@field.Label(field.LabelProps{For: "checkout-exp-month-ts6"}) {
									Month
								}
								@selectcomp.Select() {
									@selectcomp.Trigger(selectcomp.TriggerProps{ID: "checkout-exp-month-ts6"}) {
										@selectcomp.Value(selectcomp.ValueProps{Placeholder: "MM"})
									}
									@selectcomp.Content() {
										@selectcomp.Item(selectcomp.ItemProps{Value: "01"}) {
											01
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "02"}) {
											02
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "03"}) {
											03
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "04"}) {
											04
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "05"}) {
											05
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "06"}) {
											06
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "07"}) {
											07
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "08"}) {
											08
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "09"}) {
											09
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "10"}) {
											10
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "11"}) {
											11
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "12"}) {
											12
										}
									}
								}
							}
							@field.Field() {
								@field.Label(field.LabelProps{For: "checkout-7j9-exp-year-f59"}) {
									Year
								}
								@selectcomp.Select() {
									@selectcomp.Trigger(selectcomp.TriggerProps{ID: "checkout-7j9-exp-year-f59"}) {
										@selectcomp.Value(selectcomp.ValueProps{Placeholder: "YYYY"})
									}
									@selectcomp.Content() {
										@selectcomp.Item(selectcomp.ItemProps{Value: "2024"}) {
											2024
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "2025"}) {
											2025
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "2026"}) {
											2026
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "2027"}) {
											2027
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "2028"}) {
											2028
										}
										@selectcomp.Item(selectcomp.ItemProps{Value: "2029"}) {
											2029
										}
									}
								}
							}
							@field.Field() {
								@field.Label(field.LabelProps{For: "checkout-7j9-cvv"}) {
									CVV
								}
								@input.Input(input.Props{
									ID:          "checkout-7j9-cvv",
									Placeholder: "123",
								})
							}
						</div>
					}
				}
				@field.Separator()
				@field.Set() {
					@field.Legend() {
						Billing Address
					}
					@field.Description() {
						The billing address associated with your payment method
					}
					@field.Group() {
						@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
							@checkbox.Checkbox(checkbox.Props{
								ID:      "checkout-7j9-same-as-shipping-wgm",
								Checked: true,
							})
							@field.Label(field.LabelProps{
								For:   "checkout-7j9-same-as-shipping-wgm",
								Class: "font-normal",
							}) {
								Same as shipping address
							}
						}
					}
				}
				@field.Set() {
					@field.Group() {
						@field.Field() {
							@field.Label(field.LabelProps{For: "checkout-7j9-optional-comments"}) {
								Comments
							}
							@textarea.Textarea(textarea.Props{
								ID:          "checkout-7j9-optional-comments",
								Placeholder: "Add any additional comments",
								Class:       "resize-none",
							})
						}
					}
				}
				@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
					@button.Button(button.Props{Type: button.TypeSubmit}) {
						Submit
					}
					@button.Button(button.Props{
						Variant: button.VariantOutline,
						Type:    button.TypeButton,
					}) {
						Cancel
					}
				}
			}
		</form>
	</div>
}
```

## API Reference

### Label

The `Label` component renders a native label associated with a control.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `For`   | `string` | -       |
| `Class` | `string` | -       |