Input

GitHub
An input element to enter text.

Usage

Use the v-model directive to control the value of the Input.

<script setup lang="ts">
const value = ref('')
</script>

<template>
  <PInput v-model="value" />
</template>

Type

Use the type prop to change the input type. Defaults to text.

Some types have been implemented in their own components such as Checkbox, Radio, InputNumber etc. and others have been styled like file for example.

<template>
  <PInput type="file" />
</template>
You can check all the available types on the MDN Web Docs.

Placeholder

Use the placeholder prop to set a placeholder text.

<template>
  <PInput placeholder="Search..." />
</template>

Color

Use the color prop to change the ring color when the Input is focused.

<template>
  <PInput color="neutral" highlight placeholder="Search..." />
</template>
The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.

Variant

Use the variant prop to change the variant of the Input.

<template>
  <PInput color="neutral" variant="subtle" placeholder="Search..." />
</template>

Size

Use the size prop to change the size of the Input.

<template>
  <PInput size="xl" placeholder="Search..." />
</template>

Icon

Use the icon prop to show an Icon inside the Input.

<template>
  <PInput icon="i-lucide:search" size="md" variant="outline" placeholder="Search..." />
</template>

Use the leading and trailing props to set the icon position or the leading-icon and trailing-icon props to set a different icon for each position.

<template>
  <PInput trailing-icon="i-lucide:at-sign" placeholder="Enter your email" size="md" />
</template>

Avatar

Use the avatar prop to show an Avatar inside the Input.

<template>
  <PInput
    :avatar="{
      src: 'https://github.com/nuxt.png'
    }"
    size="md"
    variant="outline"
    placeholder="Search..."
  />
</template>

Loading

Use the loading prop to show a loading icon on the Input.

<template>
  <PInput loading placeholder="Search..." />
</template>

Loading Icon

Use the loading-icon prop to customize the loading icon. Defaults to i-lucide:loader-circle.

<template>
  <PInput loading loading-icon="i-lucide:loader" placeholder="Search..." />
</template>
You can customize this icon globally in your app.config.ts under pohon.icons.loading key.
You can customize this icon globally in your vite.config.ts under pohon.icons.loading key.

Disabled

Use the disabled prop to disable the Input.

<template>
  <PInput disabled placeholder="Search..." />
</template>

Examples

With clear button

You can put a Button inside the #trailing slot to clear the Input.

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

const value = ref('Click to clear');
</script>

<template>
  <PInput
    v-model="value"
    placeholder="Type something..."
    :pohon="{ trailing: 'pe-1' }"
  >
    <template
      v-if="value?.length"
      #trailing
    >
      <PButton
        color="neutral"
        variant="link"
        size="sm"
        icon="i-lucide:circle-x"
        aria-label="Clear input"
        @click="value = ''"
      />
    </template>
  </PInput>
</template>

With copy button

You can put a Button inside the #trailing slot to copy the value to the clipboard.

<script setup lang="ts">
import { useClipboard } from '@vueuse/core';
import { ref } from 'vue';

const value = ref('npx nuxt module add pohon-ui');

const { copy, copied } = useClipboard();
</script>

<template>
  <PInput
    v-model="value"
    :pohon="{ trailing: 'pr-0.5' }"
  >
    <template
      v-if="value?.length"
      #trailing
    >
      <PTooltip
        text="Copy to clipboard"
        :content="{ side: 'right' }"
      >
        <PButton
          :color="copied ? 'success' : 'neutral'"
          variant="link"
          size="sm"
          :icon="copied ? 'i-lucide:copy-check' : 'i-lucide:copy'"
          aria-label="Copy to clipboard"
          @click="copy(value)"
        />
      </PTooltip>
    </template>
  </PInput>
</template>

With password toggle

You can put a Button inside the #trailing slot to toggle the password visibility.

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

const show = ref(false);
const password = ref('');
</script>

<template>
  <PInput
    v-model="password"
    placeholder="Password"
    :type="show ? 'text' : 'password'"
    :pohon="{ trailing: 'pe-1' }"
  >
    <template #trailing>
      <PButton
        color="neutral"
        variant="link"
        size="sm"
        :icon="show ? 'i-lucide:eye-off' : 'i-lucide:eye'"
        :aria-label="show ? 'Hide password' : 'Show password'"
        :aria-pressed="show"
        aria-controls="password"
        @click="show = !show"
      />
    </template>
  </PInput>
</template>

<style>
/* Hide the password reveal button in Edge */
::-ms-reveal {
  display: none;
}
</style>

With password strength indicator

You can use the Progress component to display the password strength indicator.

Enter a password. Must contain:

  • At least 8 characters - Requirement not met
  • At least 1 number - Requirement not met
  • At least 1 lowercase letter - Requirement not met
  • At least 1 uppercase letter - Requirement not met
<script setup lang="ts">
import { computed, ref } from 'vue';

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">
    <PFormField label="Password">
      <PInput
        v-model="password"
        placeholder="Password"
        :color="color"
        :type="show ? 'text' : 'password'"
        :aria-invalid="score < 4"
        aria-describedby="password-strength"
        :pohon="{ trailing: 'pe-1' }"
        class="w-full"
      >
        <template #trailing>
          <PButton
            color="neutral"
            variant="link"
            size="sm"
            :icon="show ? 'i-lucide:eye-off' : 'i-lucide:eye'"
            :aria-label="show ? 'Hide password' : 'Show password'"
            :aria-pressed="show"
            aria-controls="password"
            @click="show = !show"
          />
        </template>
      </PInput>
    </PFormField>

    <PProgress
      :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 gap-0.5 items-center"
        :class="req.met ? 'text-success' : 'color-text-muted'"
      >
        <PIcon
          :name="req.met ? 'i-lucide:circle-check' : 'i-lucide:circle-x'"
          class="shrink-0 size-4"
        />

        <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>

With character limit

You can use the #trailing slot to add a character limit to the Input.

0/15
<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
const maxLength = 15;
</script>

<template>
  <PInput
    v-model="value"
    :maxlength="maxLength"
    aria-describedby="character-count"
    :pohon="{ trailing: 'pointer-events-none' }"
  >
    <template #trailing>
      <div
        id="character-count"
        class="text-xs color-text-muted tabular-nums"
        aria-live="polite"
        role="status"
      >
        {{ value?.length }}/{{ maxLength }}
      </div>
    </template>
  </PInput>
</template>

With keyboard shortcut

You can use the Kbd component inside the #trailing slot to add a keyboard shortcut to the Input.

/
<script setup lang="ts">
import { defineShortcuts } from '#imports';
import { useTemplateRef } from 'vue';

const input = useTemplateRef('input');

defineShortcuts({
  config:
  {
    '/': () => {
      input.value?.inputRef?.focus();
    },
  },
});
</script>

<template>
  <PInput
    ref="input"
    icon="i-lucide:search"
    placeholder="Search..."
  >
    <template #trailing>
      <PKbd value="/" />
    </template>
  </PInput>
</template>
This example uses the defineShortcuts composable to focus the Input when the / key is pressed.

With mask

There's no built-in support for masks, but you can use libraries like maska to mask the Input.

<script setup lang="ts">
import { vMaska } from 'maska/vue';
</script>

<template>
  <div class="flex flex-col gap-2">
    <PInput
      v-maska="'#### #### #### ####'"
      placeholder="4242 4242 4242 4242"
      icon="i-lucide:credit-card"
    />

    <div class="flex gap-2 items-center">
      <PInput
        v-maska="'##/##'"
        placeholder="MM/YY"
        icon="i-lucide:calendar"
      />
      <PInput
        v-maska="'###'"
        placeholder="CVC"
      />
    </div>
  </div>
</template>

Within a FormField

You can use the Input within a FormField component to display a label, help text, required indicator, etc.

We won't share your email.
<script setup lang="ts">
import { ref } from 'vue';

const email = ref('');
</script>

<template>
  <PFormField
    label="Email"
    help="We won't share your email."
    required
  >
    <PInput
      v-model="email"
      placeholder="Enter your email"
      icon="i-lucide:at-sign"
    />
  </PFormField>
</template>
It also provides validation and error handling when used within a Form component.

Within a FieldGroup

You can use the Input within a FieldGroup component to group multiple elements together.

https:// 

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

const value = ref('');
const domains = ['.com', '.dev', '.org'];
const domain = ref(domains[0]);
</script>

<template>
  <PFieldGroup>
    <PInput
      v-model="value"
      placeholder="nuxt"
      :pohon="{
        base: 'pl-14.5',
        leading: 'pointer-events-none',
      }"
    >
      <template #leading>
        <p class="text-sm color-text-muted">
          https://
        </p>
      </template>
    </PInput>

    <PSelectMenu
      v-model="domain"
      :items="domains"
    />
  </PFieldGroup>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

idstring
namestring
type'text'"number" | "image" | "text" | "button" | "search" | "time" | "color" | "checkbox" | "date" | "datetime-local" | "email" | "file" | "hidden" | "month" | "password" | "radio" | "range" | "reset" | "submit" | "tel" | "url" | "week" | string & {}
placeholderstring

The placeholder text when the input is empty.

color'primary'"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
variant'outline'"outline" | "soft" | "subtle" | "ghost" | "none"
size'md'"md" | "xs" | "sm" | "lg" | "xl"
autocomplete'off'string & {} | "on" | "off"
autofocusDelay0number
modelValue_Number<_Optional<_Nullable<T, Mod>, Mod>, Mod>
defaultValue_Number<_Optional<_Nullable<T, Mod>, Mod>, Mod>
modelModifiersMod
iconstring | object

Display an icon based on the leading and trailing props.

avatarPAvatarProps

Display an avatar on the left side.

leadingIconstring | object

Display an icon on the left side.

trailingIconstring | object

Display an icon on the right side.

loadingIconappConfig.pohon.icons.loadingstring | object

The icon when the loading prop is true.

liststring
maxstring | number
maxlengthstring | number
minstring | number
minlengthstring | number
patternstring
readonlyfalse | true | "true" | "false"
stepstring | number
requiredboolean
autofocusboolean
disabledboolean
highlightboolean

Highlight the ring color like a focus state.

leadingboolean

When true, the icon will be displayed on the left side.

trailingboolean

When true, the icon will be displayed on the right side.

loadingboolean

When true, the loading icon will be displayed.

pohon{ root?: ClassValue; base?: ClassValue; leading?: ClassValue; leadingIcon?: ClassValue; leadingAvatar?: ClassValue; leadingAvatarSize?: ClassValue; trailing?: ClassValue; trailingIcon?: ClassValue; }
This component also supports all native <input> HTML attributes.

Slots

Slot Type
leading{ pohon: object; }
default{ pohon: object; }
trailing{ pohon: object; }

Emits

Event Type
update:modelValue[value: _Number<_Optional<_Nullable<T, Mod>, Mod>, Mod>]
blur[event: FocusEvent]
change[event: Event]

Expose

When accessing the component via a template ref, you can use the following:

NameType
inputRefRef<HTMLInputElement | null>

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PInput. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts
export default defineAppConfig({
  pohon: {
    input: {
      slots: {
        root: '',
        base: '',
        leading: '',
        leadingIcon: '',
        leadingAvatar: '',
        leadingAvatarSize: '',
        trailing: '',
        trailingIcon: ''
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: '',
            base: ''
          },
          vertical: {
            root: '',
            base: ''
          }
        },
        size: {
          xs: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          sm: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          md: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          lg: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          xl: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          }
        },
        variant: {
          outline: '',
          soft: '',
          subtle: '',
          ghost: '',
          none: ''
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: ''
        },
        type: {
          file: ''
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    input: {
      slots: {
        root: '',
        base: '',
        leading: '',
        leadingIcon: '',
        leadingAvatar: '',
        leadingAvatarSize: '',
        trailing: '',
        trailingIcon: ''
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: '',
            base: ''
          },
          vertical: {
            root: '',
            base: ''
          }
        },
        size: {
          xs: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          sm: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          md: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          lg: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          },
          xl: {
            base: '',
            leading: '',
            trailing: '',
            leadingIcon: '',
            leadingAvatarSize: '',
            trailingIcon: ''
          }
        },
        variant: {
          outline: '',
          soft: '',
          subtle: '',
          ghost: '',
          none: ''
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: ''
        },
        type: {
          file: ''
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
};

Changelog

No recent changes

FormField

A wrapper for form elements that provides validation and error handling.

InputDate

Enables users to input specific dates within a designated field.