Tile UI React
Source code

Components

Input

A text input with built-in label, helper text, and error state handling.

Use Input when you want a ready-made field surface with labeling, helper copy, and error messaging built in.

Used in your dashboard and generated URLs.
Use this for immutable values or generated fields.
A project name is required before publishing.
import { useState } from 'react';
import { Input } from '@tile-ui/react';

export default function InputDemo() {
	const [value, setValue] = useState('');

Registry install

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

Package usage

import { Input } from '@tile-ui/react';
 
export function ProfileNameField() {
	return <Input label="Display name" helperText="Shown on your public profile." />;
}

The label and helperText props render the field anatomy without an extra form wrapper. When error is set, it replaces the helper text and wires aria-invalid and aria-describedby automatically:

<Input label="Username" error="Username already exists" defaultValue="tile" />

Highlights

  • Label and helper text built in
  • Error-state messaging with ARIA wiring
  • Matches Textarea anatomy for form consistency

Registry dependencies

ItemPurpose
inputComponent source and module styles
coreFramework-agnostic logic helpers
utilsShared utility helpers
stylesShared SCSS tokens and globals

API reference

Input

The Input component wraps the native input element and extends React.InputHTMLAttributes<HTMLInputElement>.

PropTypeDefaultNotes
labelstring—Optional field label rendered above the input.
helperTextstring—Displayed below the field when there is no error.
errorstring—Displays invalid state and error messaging.
requiredbooleanfalseAdds required styling to the label.
PreviousHoverCardNextInputGroup