Tile UI Vue
Source code

Components

Field

Field label, description, and message wrapper.

Use Field to compose accessible form fields with consistent structure.

We never share your email.

import { Field, FieldLabel, FieldDescription, FieldMessage } from '@tile-ui/vue';
 
export default function FieldDemo() {
	return (
		<Field name="email" required invalid>
			<FieldLabel htmlFor="demo-email">Email</FieldLabel>

Registry install

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

Package usage

import { Field, FieldLabel, FieldDescription, FieldMessage } from '@tile-ui/vue';
 
<Field name="email" required>
	<FieldLabel htmlFor="email">Email</FieldLabel>
	<input id="email" />
	<FieldDescription>We never share your email.</FieldDescription>
	<FieldMessage variant="error">Required.</FieldMessage>
</Field>

Highlights

  • Label, description, and message
  • Invalid and required states
  • Message variants

Registry dependencies

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

API reference

Field

Prop Type Default
name string —
invalid boolean —
required boolean —

FieldLabel

Prop Type Default
htmlFor string —

FieldDescription

No custom props.

FieldMessage

Prop Type Default
variant 'default' | 'error' | 'warning' | 'success' | 'info' —
PreviousEmptyNextForm