Preview

Installation

npx sigma-ui@latest add label

Usage

<script setup lang="ts">
import { Label } from '@/components/ui/label';
</script>

<template>
  <Label for="email">Your email address</Label>
</template>

• Set for to the id of the control the label describes, or wrap the control inside the label.
• When the control has the peer class and is disabled, the label is dimmed automatically.

Examples

With Input

API Reference

Label

Props

Prop	Type	Default
for The id of the element the label is associated with.	string	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Renders a native <label> element, so clicking it focuses or toggles the associated control and screen readers announce the label with the control. It has no keyboard interactions of its own.

Key	Description
None	The label is not focusable.