Label

A lightweight form label with support for required-state styling.

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/vue';
 
export default function LabelDemo() {
	return (
		<div class="component-preview__stack">
			<div class="form-group">

Registry install

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

Package usage

import { Label } from '@tile-ui/vue';
<div class="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

Item Purpose
label Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Label

Prop Type Default Notes
required boolean false Adds required styling to the label.
htmlFor string The id of the associated control.