Input

Last updated

2026-10-15 UTC

Demo

input/demo.vue

Name

Please enter a name.

<script setup lang="ts">
import { ref, useId } from 'vue'

const name = ref('')
const id = useId()
</script>

<template>
  <div class="grid max-w-sm w-full gap-4">
    <label :for="id" class="grid gap-2">
      Name
      <YlfInput :id="id" v-model="name" name="name" autocomplete="name" placeholder="Your name" />
    </label>
    <YlfInput size="sm" aria-label="Compact field" placeholder="Compact field" />
    <YlfInput model-value="Read-only value" aria-label="Read-only value" readonly />
    <YlfInput model-value="Unavailable" aria-label="Unavailable" disabled />
    <div class="grid gap-2">
      <YlfInput invalid aria-label="Name" :aria-describedby="`${id}-error`" />
      <span :id="`${id}-error`" class="text-sm text-[var(--ylf-status-danger-text)]">Please enter a name.</span>
    </div>
  </div>
</template>

YlfInput keeps native input behavior and shares the Select control geometry. Use a visible label; describe invalid values with text connected by aria-describedby.

Props

Prop	Description	Type	Default
modelValue	Text value (v-model)	string	''
size	Control density	sm | md	md
invalid	Expose an invalid value	boolean	false

Native attributes and events such as id, name, type, required, disabled, readonly, placeholder, autocomplete, input and blur are forwarded to the input. Native composition events retain IME input behavior. This component is for text values; use a dedicated numeric control for numeric parsing.

The default target is at least 44px tall. Compact controls are 34px and grow to 44px for coarse pointers. The error state does not replace a visible error message.