Input

<script setup lang="ts">
const name = ref("");
</script>

<template>
  <div class="demo-field">
    <UiInput
      v-model="name"
      label="Workspace name"
      hint="Shown to everyone you invite."
      placeholder="Acme Inc."
    />
  </div>
</template>

<template>
  <div class="demo-stack demo-field">
    <UiInput label="Price" prefix="$" suffix="USD" type="number" placeholder="0.00" />
    <UiInput label="Search" type="search" placeholder="Find anything" optional>
      <template #prefix><Icon name="search" :size="14" /></template>
    </UiInput>
  </div>
</template>

<script setup lang="ts">
const email = ref("ada@");
const error = computed(() =>
  /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.value) ? undefined : "Enter a valid email address.",
);
</script>

<template>
  <div class="demo-field">
    <UiInput v-model="email" type="email" label="Email" :error="error" />
  </div>
</template>