Label

Use Label directly when you are composing your own field structure or when you want explicit control over the relationship between field and caption.

import { Label } from '@tile-ui/react';

export default function LabelDemo() {
	return (
		<div className="component-preview__stack">
			<div className="form-group">

Registry install

pnpm dlx shadcn@latest add @tile-ui/label

Package usage

import { Label } from '@tile-ui/react';
 
export function SlugField() {
	return (
		<div className="form-group">
			<Label htmlFor="slug" required>
				Project slug
			</Label>
			<input id="slug" defaultValue="tile-ui" readOnly />
		</div>
	);
}

Label works as a standalone primitive and pairs with custom field structures when you do not need the higher-level Input and Textarea components.

Highlights

• Required marker styling
• Simple form composition
• Pairs cleanly with Input and Textarea

Registry dependencies

API reference

Label

The Label component wraps the Radix Label primitive and extends React.LabelHTMLAttributes<HTMLLabelElement>.

Related docs

• Input
• Textarea
• Profile Settings example