Input

<AcceleratorInput placeholder="Default Input" :validate="false" />

<AcceleratorInput placeholder="Default Input" info="This is an info message" :validate="false" />

<AcceleratorInput placeholder="Default Input" custom-error="This is an error message" :validate="false" />

<AcceleratorInput placeholder="Default Input" loading :validate="false" />

<AcceleratorInput type="password" placeholder="Password Input" :validate="false" />

<AcceleratorInput type="number" placeholder="Numeric Input" :validate="false" />

<AcceleratorInput type="numberString" placeholder="Numeric String Input" :validate="false" />

<AcceleratorInput type="file" :validate="false" />

<AcceleratorInput placeholder="Disabled Input" disabled :validate="false" />

<AcceleratorInput placeholder="Left Icon" :validate="false">
  <template #iconLeft>
    <AccISearch />
  </template>
</AcceleratorInput>

<AcceleratorInput placeholder="Right Icon" :validate="false">
  <template #iconRight>
    <AccISearch />
  </template>
</AcceleratorInput>

<AcceleratorInput type="password" placeholder="Password with custom icon" :validate="false">
  <template #iconRight="{ showOrHidePassword, showPassword }">
    <button type="button" @click="showOrHidePassword">
      {{ showPassword ? '🙈' : '👁️' }}
    </button>
  </template>
</AcceleratorInput>

<AcceleratorInput size="xs" :validate="false" />
<AcceleratorInput size="sm" :validate="false" />
<AcceleratorInput size="md" :validate="false" />

<template>
  <AcceleratorInput
    :validate="false"
    v-model="displayFormatterValue"
    :display-formatter="formatDate"
  />
  <AcceleratorButton type="button" @click="displayFormatterValue = '2030-12-25'">
    Set to 2030-12-25
  </AcceleratorButton>
</template>

<script setup lang="ts">
const displayFormatterValue = ref<string | undefined>('2026-07-06');

// Format an ISO date string (e.g. "2026-07-06") into a readable date (e.g. "6 July 2026")
const formatDate = (value: string | number | undefined | null) => {
  if (!value) return '';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '';
  return date.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
};
</script>

<template>
  <AcceleratorInput placeholder="name" name="name" />
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const schema = toTypedSchema(z.object({
  name: z.string(),
}));

const { values } = useForm({
  validationSchema: schema,
});
</script>

<template>
  <AcceleratorInput placeholder="name" name="username" />
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const schema = toTypedSchema(z.object({
  username: z.string(),
}));

const { values } = useForm({
  validationSchema: schema,
  initialValues: {
    username: "John",
  },
});
</script>

<template>
  <AcceleratorInput placeholder="email" name="email" />
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const schema = toTypedSchema(z.object({
  email: z.string().email(),
}));

const { values } = useForm({
  validationSchema: schema,
});
</script>

<template>
  <AcceleratorInput placeholder="color hex" name="colorSchema" />
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const schema = toTypedSchema(z.object({
  colorSchema: z.string().regex(/^#(?:[0-9a-fA-F]{3}){1,2}$/, "Invalid hex color"),
}));

const { values } = useForm({
  validationSchema: schema,
});
</script>

<template>
  <AcceleratorInput type="number" placeholder="amount" name="amount" />
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const schema = toTypedSchema(z.object({
  amount: z.number(),
}));

const { values } = useForm({
  validationSchema: schema,
});
</script>

<template>
  <AcceleratorInput type="numberString" placeholder="amount" name="authCode" />
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const schema = toTypedSchema(z.object({
  authCode: z.string(),
}));

const { values } = useForm({
  validationSchema: schema,
});
</script>

<template>
  <AcceleratorInput placeholder="surname" name="surname" v-if="showSurname" />
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const showSurname = ref(true);

const schema = toTypedSchema(z.object({
  surname: z.string(),
}));

const { values } = useForm({
  validationSchema: schema,
  keepValuesOnUnmount: true,
});
</script>

<template>
  <div class="lev-input-group">
    <AcceleratorLabel for="name" label="Name" />
    <AcceleratorInput placeholder="name" name="name" />
  </div>
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const schema = toTypedSchema(z.object({
  name: z.string(),
}));

const { values } = useForm({
  validationSchema: schema,
});
</script>

<template>
  <AcceleratorInput name="birthday" :display-formatter="formatDate" />
  <AcceleratorButton type="button" @click="setFieldValue('birthday', '2030-12-25')">
    Set to 2030-12-25
  </AcceleratorButton>
</template>

<script setup lang="ts">
import { useForm } from 'vee-validate';
import { z } from 'zod';
import { toTypedSchema } from '@vee-validate/zod';

const schema = toTypedSchema(z.object({
  birthday: z.string(),
}));

const { values, setFieldValue } = useForm({
  validationSchema: schema,
  initialValues: {
    birthday: '2026-07-06',
  },
});

// Format an ISO date string (e.g. "2026-07-06") into a readable date (e.g. "6 July 2026")
const formatDate = (value: string | number | undefined | null) => {
  if (!value) return '';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return '';
  return date.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
};
</script>