Tile UI Vue
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 { defineComponent, ref } from 'vue';
import { Input } from '@tile-ui/vue';
 
export default defineComponent({
	name: 'InputDemo',
	setup() {

Registry install

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

Package usage

import { Input } from '@tile-ui/vue';
<Input label="Display name" helperText="Shown on your public profile." />

Use modelValue with onUpdate:modelValue for two-way binding. 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" modelValue="tile" />

Highlights

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

Registry dependencies

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

API reference

Input

Prop Type Default Notes
label string — Optional field label rendered above the input.
helperText string — Displayed below the field when there is no error.
error string — Displays invalid state and error messaging.
required boolean false Adds required styling to the label.
modelValue string — The bound input value.
placeholder string — Placeholder text for the input.
type string text The native input type.
disabled boolean false Disables the input.
PreviousHoverCardNextInputGroup