Input

A text entry field.

<script setup lang="ts">
import { Input } from '@shardsui/vue/input'
</script>

<template>
  <label class="flex flex-col items-start gap-1 text-sm font-semibold text-gray-900">
    Title
    <Input
      placeholder="e.g. Design Systems"
      class="h-8 w-64 rounded-md border border-gray-200 px-2 text-sm font-normal text-gray-900 focus:outline-2 focus:-outline-offset-1 focus:outline-gray-950 any-pointer-coarse:text-base"
    />
  </label>
</template>

Anatomy

<script setup>
import { Input } from '@shardsui/vue/input'
</script>

<template>
  <Input />
</template>

Usage guidelines

• Form controls must have an accessible name: give the input a <label> element, or wrap it in the Field parts. See the forms guide.
• Input is Field.Control under a shorter import: inside a <Field.Root> it picks up the label association, validation state and error bindings documented in Field. Outside one it is a plain <input>.

API reference

Other standard <input> props (type, required, pattern, placeholder, etc.) pass through, as do <textarea> props (rows, cols, wrap) when as="textarea".

Outside a <Field.Root> only data-disabled and a forwarded aria-describedby are emitted.