v2.0

PU-Input Component

A customizable input component with icon support and enhanced interaction features

Usage

Basic Usage

With Icons

With Label

with label

Disabled State

Props

Prop	Type	Required	Default	Description
modelValue	string \| number \| null	Yes	-	Input value (v-model support)
disabled	boolean	No	false	Disables the input field
placeholder	string	No	''	Input placeholder text
id	string	No	undefined	Unique identifier for the input
iconLeft	string	No	undefined	Left icon name
iconRight	string	No	undefined	Right icon name

Events

Event	Description	Payload
update:modelValue	Emits on input change, blur or Enter key	string \| number \| null
blur	Triggers on field blur	Event
keydown.enter	Triggers on Enter key press	KeyboardEvent

Styling

Uses font-patrick font family

Base styles applied with Tailwind utilities:

.pu-input {
  @apply relative flex items-center gap-2 w-full p-2;
  @apply border-2 border-primary-light-500 rounded-lg;
  @apply transition-all duration-150 ease-in-out;
}

.pu-input--default {
  @apply text-gray-800 text-base w-full;
  @apply focus:outline-none;
}

Interactive States

Focus state increases border width:

  .pu-input:focus {
    @apply border-8;
  }

Custom placeholder styling:

  .pu-input::placeholder {
    @apply text-primary-light-300 text-sm;
  }

Dependencies

Requires PUIcon component for icon display
Built with Tailwind CSS utility classes