Ermine UI

Input

A single-line text field. Works with v-model and every native input attribute.

See it liveSource on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add input
pnpm dlx ermineui add input
yarn dlx ermineui add input
bunx ermineui add input

That copies 2 files into src/components/ui/input/. Files you already have are kept.

Use

import { Input } from '@/components/ui/input'
<InputGroup>
  <template #prefix>$</template>
  <Input v-model="amount" />
  <template #suffix>USD</template>
</InputGroup>
<PasswordInput v-model="password" autocomplete="new-password" />
<SearchInput v-model="query" placeholder="Search" />

<TagsInput v-model="emails" name="to" :validate="(tag) => isEmail(tag) ? undefined : 'Not an email address.'" />

<Toggle v-model="bold" aria-label="Bold"><strong>B</strong></Toggle>

<TimePicker v-model="time" :step="15" min="07:00" max="19:00" />    <!-- 'HH:MM', 24-hour -->
<DateTimePicker v-model="startsAt" />                               <!-- 'YYYY-MM-DDTHH:MM' -->
<ColorPicker v-model="colour" :presets="['#2a78d6', '#eb6834']" />  <!-- '#rrggbb' -->

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island.

What gets copied

FileWhere it goes
Input.vuesrc/components/ui/input/Input.vue
index.tssrc/components/ui/input/index.ts

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

Input.vue 76 lines
<script setup lang="ts">
const model = defineModel<string | number>()
</script>

<template>
  <input v-model="model" class="er-input" />
</template>

<style>
@layer components {
  .er-input {
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--er-control-md);
    padding: 0 0.75rem;
    border: 1px solid var(--er-input);
    border-radius: var(--er-radius-control);
    background: var(--er-input-background);
    color: var(--er-foreground);
    font-family: inherit;
    /* 16px stops iOS from zooming the page when the field is focused. */
    font-size: 1rem;
    line-height: 1.25rem;
    box-shadow: var(--er-shadow-xs);
    transition:
      border-color var(--er-duration),
      outline-color var(--er-duration);
  }

  @media (min-width: 48rem) {
    .er-input {
      font-size: 0.875rem;
    }
  }

  .er-input::placeholder {
    color: var(--er-muted-foreground);
  }

  .er-input:focus-visible {
    border-color: var(--er-ring);
    outline: 2px solid color-mix(in oklab, var(--er-ring) 45%, transparent);
    outline-offset: 0;
  }

  .er-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .er-input[aria-invalid='true'] {
    border-color: var(--er-destructive);
  }

  .er-input[aria-invalid='true']:focus-visible {
    outline-color: color-mix(in oklab, var(--er-destructive) 35%, transparent);
  }

  .er-input[type='file'] {
    padding: 0.3125rem 0.75rem;
    color: var(--er-muted-foreground);
  }

  .er-input::file-selector-button {
    margin-right: 0.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--er-foreground);
    font: inherit;
    font-weight: var(--er-weight-medium);
  }
}
</style>
index.ts 3 lines
/** Input — a single-line text field. Works with v-model and every native input attribute. */
export { default as Input } from './Input.vue'