Tile UI React
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/react';

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/react';
 
<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

ItemPurpose
fieldComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

Field

PropTypeDefault
namestring—
invalidboolean—
requiredboolean—

FieldLabel

PropTypeDefault
htmlForstring—

FieldDescription

No custom props.

FieldMessage

PropTypeDefault
variant'default' | 'error' | 'warning' | 'success' | 'info'—
PreviousEmptyNextForm