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.