Input fields

This documentation covers reusable Vue components for handling dynamic form inputs in Nuxt 3 projects: a basic input component. These components support various input types and provide consistent styling and behavior.

Dynamic Input Component

A versatile Vue component for Nuxt 3 that supports multiple input types including text, number, textarea, checkbox, and password fields. The component provides consistent styling and behavior across different input types.

Props
Prop NameTypeDefaultRequiredDescription
nameString-YesInput field name attribute
placeholderString""NoEnables Placeholder text
requiredBooleanfalseNoWhether the field is required
labelString-NoLabel text above the input
valueString-NoInput value
disabledBoolean-NoDisables the input field
typeString"text"NoInput type ('text', 'number', 'textarea', 'editor', 'checkbox', 'password')
<!-- component FormText.vue -->
<template>
  <div class="flex flex-col gap-1 font-inter">
    <label v-if="label" class="body-xsmall text-neutral-500 mb-1"
      >{{ label }}
    </label>
    <DatePicker
      v-if="type === 'date'"
      v-model="value"
      :name="name"
      showIcon
      iconDisplay="input"
      class="h-10"
      :placeholder="placeholder"
      @change="onChange"
      :class="{ 'p-invalid': errorMessage }"
    />

    <Textarea
      v-else-if="type === 'textarea'"
      v-model="value"
      :name="name"
      class="border px-3 py-2 focus:outline-none text-sm"
      autoResize
      rows="5"
      :placeholder="placeholder"
      @input="onChange"
      :class="{ 'p-invalid': errorMessage }"
      style="box-shadow: 0px 1px 2px 0px #1018280d"
      :pt="{
        root: {
          style: 'font-size: 0.875rem; color: #97989A; '
        }
      }"
    />
    <Checkbox
      v-model="value"
      :name="name"
      :class="{ 'p-invalid': errorMessage }"
      v-else-if="type === 'checkbox'"
      :binary="true"
      :inputId="inputId"
    ></Checkbox>
    <Password
      v-else-if="type === 'password'"
      v-model="value"
      :name="name"
      class="h-10"
      :placeholder="placeholder"
      :type="type"
      :feedback="false"
      :inputProps="{ autocomplete: 'on' }"
      toggleMask
      @input="onChange"
    />
    <InputText
      v-else
      v-model="value"
      :name="name"
      class="w-full h-10 shadow-none"
      :placeholder="placeholder"
      :class="{ 'p-invalid': errorMessage }"
      @input="onChange"
      :type="type"
      :disabled="disabled"
    />
  </div>
</template>
<script setup>
const props = defineProps({
  name: { type: String },
  init: { type: String },
  placeholder: { type: String, default: '' },
  required: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  label: { type: String },
  inputId: { type: String },
  value: { type: String },
  type: { type: String, default: 'text' }
})

// const value = ref(props.init);
const value = ref(props.value)

const errorMessage = ref('')
const emit = defineEmits(['update:modelValue'])

const onChange = (e) => {
  emit('update:modelValue', e.target.value)
  // validate();
}

watch(
  () => props.value,
  (newValue) => {
    value.value = newValue
  }
)
</script>

.p-textarea:enabled:hover {
  border-color: transparent !important;
}
.p-inputtext {
  border-radius: 8px !important;
  border-color: transparent !important;
  background: #fafafa !important;
  color: #121212 !important;
  font-size: 14px !important;
  font-weight: 600;
}

.dark {
  .p-inputtext {
    border-color: transparent !important;
  }
}
.p-inputtext::placeholder {
  color: #97989a !important;
  font-size: 14px;
  font-weight: 600;
}
.p-password .p-inputtext {
  width: 100% !important;
}
Example Usage
          <FormText
            label="Name"
            v-model="name"
            type="text"
            placeholder="Enter Name"
          />
Edit this page on GitHub