Input

Form input field built on Nuxt UI with label, hint, error handling, and optional password toggle.

<script setup lang="ts">
import RyderInput from "@opeolluwa/ryder/components/primitives/Input.vue"
import { ref } from "vue";

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

<template>
  <RyderInput v-model="email" name="email" label="Email" />
</template>

Examples

<script setup lang="ts">
import Input from "../../../src/components/primitives/Input.vue";
import { ref } from "vue";

const value = ref("");
</script>

<template>
  <div class="flex flex-col gap-4">
    <Input
      v-model="value"
      label="Email"
      name="email"
      placeholder="Enter your email"
    />
    <p class="text-sm text-muted">{{ value }}</p>
  </div>
</template>

Props

Prop	Type	Default	Description
label	string	undefined	Field label.
name	string	undefined	Field name for form validation.
icon	string	undefined	Leading icon name.
placeholder	string	undefined	Placeholder text.
hint	string	undefined	Hint text below field.
disabled	boolean	false	Disable the input.
type	string	"text"	Input type (e.g., text, password, email).
enablePasswordToggle	boolean	true	Show password visibility toggle when type is password.
trailingIcon	string	undefined	Trailing icon name.
size	"xs" | "sm" | "md" | "lg" | "xl"	"md"	Input size.
inputClass	string	undefined	Additional classes for input base.
labelClass	string	undefined	Additional classes for label.

Emits

None declared — model updates and native events fall through.

Slots

None.

Notes

• Uses v-model with defineModel<string>().
• For password inputs, toggles visibility with internal ref.
• Adjusts placeholder size based on size prop.