Field

Workspace

Use at least four characters.

Field IDs and ARIA stay connected.

import { createSignal } from 'solid-js';
import { Field, FieldDescription, FieldLabel, FieldMessage, useFieldContext } from '@tile-ui/solid';

function FieldControl(props: { onInput: (value: string) => void }) {
	const field = useFieldContext();
	return (

Use Field to connect a native control to stable labels, descriptions, and messages.

Registry install

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

Package usage

import { Field, FieldLabel, FieldDescription, FieldMessage } from '@tile-ui/solid';

<Field name="email" required>
	<FieldLabel>Email</FieldLabel>
	<FieldDescription>We never share your email.</FieldDescription>
	<FieldMessage>Ready.</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
`utils`	Shared utility helpers
`styles`	Shared SCSS tokens and globals

API reference

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'`	—