docs(input): add examples

docs/app/components/content/examples/input/InputButtonGroupExample.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const value = ref('')
+const domains = ['.com', '.dev', '.org']
+const domain = ref(domains[0])
+</script>
+
+<template>
+  <UButtonGroup>
+    <UInput
+      v-model="value"
+      placeholder="nuxt"
+      :ui="{
+        base: 'pl-[57px]',
+        leading: 'pointer-events-none'
+      }"
+    >
+      <template #leading>
+        <p class="text-sm text-[var(--ui-text-muted)]">
+          https://
+        </p>
+      </template>
+    </UInput>
+
+    <USelectMenu v-model="domain" :items="domains" />
+  </UButtonGroup>
+</template>

docs/app/components/content/examples/input/InputCharacterLimitExample.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const value = ref('')
+const maxLength = 15
+</script>
+
+<template>
+  <UInput
+    v-model="value"
+    :maxlength="maxLength"
+    aria-describedby="character-count"
+    :ui="{ trailing: 'pointer-events-none' }"
+  >
+    <template #trailing>
+      <div
+        id="character-count"
+        class="text-xs text-[var(--ui-text-muted)] tabular-nums"
+        aria-live="polite"
+        role="status"
+      >
+        {{ value?.length }}/{{ maxLength }}
+      </div>
+    </template>
+  </UInput>
+</template>

docs/app/components/content/examples/input/InputClearButtonExample.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const value = ref('Click to clear')
+</script>
+
+<template>
+  <UInput
+    v-model="value"
+    placeholder="Type something..."
+    :ui="{ trailing: 'pr-0.5' }"
+  >
+    <template v-if="value?.length" #trailing>
+      <UButton
+        color="neutral"
+        variant="link"
+        size="sm"
+        icon="i-heroicons-x-circle"
+        aria-label="Clear input"
+        @click="value = ''"
+      />
+    </template>
+  </UInput>
+</template>

docs/app/components/content/examples/input/InputFloatingLabelExample.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const value = ref('')
+</script>
+
+<template>
+  <UInput v-model="value" placeholder="" :ui="{ base: 'peer' }">
+    <label class="pointer-events-none absolute left-0 -top-2.5 text-[var(--ui-text-highlighted)] text-xs font-medium px-1.5 transition-all peer-focus:-top-2.5 peer-focus:text-[var(--ui-text-highlighted)] peer-focus:text-xs peer-focus:font-medium peer-placeholder-shown:text-sm peer-placeholder-shown:text-[var(--ui-text-dimmed)] peer-placeholder-shown:top-1.5 peer-placeholder-shown:font-normal">
+      <span class="inline-flex bg-[var(--ui-bg)] px-1">Email address</span>
+    </label>
+  </UInput>
+</template>

docs/app/components/content/examples/input/InputFormFieldExample.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const email = ref('')
+</script>
+
+<template>
+  <UFormField label="Email" help="We won't share your email." required>
+    <UInput v-model="email" placeholder="Enter your email" icon="i-heroicons-at-symbol" />
+  </UFormField>
+</template>

docs/app/components/content/examples/input/InputPasswordStrengthIndicatorExample.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+const show = ref(false)
+const password = ref('')
+
+function checkStrength(str: string) {
+  const requirements = [
+    { regex: /.{8,}/, text: 'At least 8 characters' },
+    { regex: /\d/, text: 'At least 1 number' },
+    { regex: /[a-z]/, text: 'At least 1 lowercase letter' },
+    { regex: /[A-Z]/, text: 'At least 1 uppercase letter' }
+  ]
+
+  return requirements.map(req => ({ met: req.regex.test(str), text: req.text }))
+}
+
+const strength = computed(() => checkStrength(password.value))
+const score = computed(() => strength.value.filter(req => req.met).length)
+
+const color = computed(() => {
+  if (score.value === 0) return 'neutral'
+  if (score.value <= 1) return 'error'
+  if (score.value <= 2) return 'warning'
+  if (score.value === 3) return 'warning'
+  return 'success'
+})
+
+const text = computed(() => {
+  if (score.value === 0) return 'Enter a password'
+  if (score.value <= 2) return 'Weak password'
+  if (score.value === 3) return 'Medium password'
+  return 'Strong password'
+})
+</script>
+
+<template>
+  <div class="space-y-2">
+    <UFormField label="Password">
+      <UInput
+        v-model="password"
+        placeholder="Password"
+        :color="color"
+        :type="show ? 'text' : 'password'"
+        :ui="{ trailing: 'pr-0.5' }"
+        :aria-invalid="score < 4"
+        aria-describedby="password-strength"
+        class="w-full"
+      >
+        <template #trailing>
+          <UButton
+            color="neutral"
+            variant="link"
+            size="sm"
+            :icon="show ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
+            aria-label="show ? 'Hide password' : 'Show password'"
+            :aria-pressed="show"
+            aria-controls="password"
+            @click="show = !show"
+          />
+        </template>
+      </UInput>
+    </UFormField>
+
+    <UProgress
+      :color="color"
+      :indicator="text"
+      :model-value="score"
+      :max="4"
+      size="sm"
+    />
+
+    <p id="password-strength" class="text-sm font-medium">
+      {{ text }}. Must contain:
+    </p>
+
+    <ul class="space-y-1" aria-label="Password requirements">
+      <li
+        v-for="(req, index) in strength"
+        :key="index"
+        class="flex items-center gap-0.5"
+        :class="req.met ? 'text-[var(--ui-success)]' : 'text-[var(--ui-text-muted)]'"
+      >
+        <UIcon :name="req.met ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" class="size-4 shrink-0" />
+
+        <span class="text-xs font-light">
+          {{ req.text }}
+          <span class="sr-only">
+            {{ req.met ? ' - Requirement met' : ' - Requirement not met' }}
+          </span>
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>

docs/app/components/content/examples/input/InputPasswordToggleExample.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const show = ref(false)
+const password = ref('password')
+</script>
+
+<template>
+  <UInput
+    v-model="password"
+    placeholder="Password"
+    :type="show ? 'text' : 'password'"
+    :ui="{ trailing: 'pr-0.5' }"
+  >
+    <template #trailing>
+      <UButton
+        color="neutral"
+        variant="link"
+        size="sm"
+        :icon="show ? 'i-heroicons-eye-slash' : 'i-heroicons-eye'"
+        aria-label="show ? 'Hide password' : 'Show password'"
+        :aria-pressed="show"
+        aria-controls="password"
+        @click="show = !show"
+      />
+    </template>
+  </UInput>
+</template>