@usevyre/react@usevyre/vue

Input

Text input with optional left/right icon slots and three size variants. Pair with Field for a labelled form control with validation states, or use Textarea for multi-line input.

Basic

import { Input } from "@usevyre/react";

<Input placeholder="Enter your email" type="email" />
<Input placeholder="With left icon" leftIcon={<SearchIcon />} />
<Input placeholder="With right icon" rightIcon={<EyeIcon />} />
<Input placeholder="Disabled" disabled />

<script setup>
import { Input } from "@usevyre/vue";
</script>
<template>
  <Input placeholder="Enter your email" type="email" />
  <Input placeholder="With left icon">
    <template #left><SearchIcon /></template>
  </Input>
  <Input placeholder="Disabled" disabled />
</template>

With Field wrapper

Wrap any input with Field to get a label, hint text, and validation state styling.

We'll never share it.

Password

Minimum 8 characters.

import { Field, Input } from "@usevyre/react";

<Field label="Email" htmlFor="email" hint="We'll never share it.">
  <Input id="email" type="email" placeholder="you@example.com" />
</Field>

<Field label="Password" htmlFor="pwd" state="error" hint="Minimum 8 characters.">
  <Input id="pwd" type="password" />
</Field>

<script setup>
import { Field, Input } from "@usevyre/vue";
</script>
<template>
  <Field label="Email" html-for="email" hint="We'll never share it.">
    <Input id="email" type="email" placeholder="you@example.com" />
  </Field>

  <Field label="Password" html-for="pwd" state="error" hint="Minimum 8 characters.">
    <Input id="pwd" type="password" />
  </Field>
</template>

Textarea

import { Textarea } from "@usevyre/react";

<Textarea placeholder="Add a description..." rows={4} />

<Textarea placeholder="Add a description..." :rows="4" />

Input props

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Input height scale.
`leftIcon`	`ReactNode`	`—`	React only. Icon rendered inside the left of the input.
`rightIcon`	`ReactNode`	`—`	React only. Icon rendered inside the right of the input.
`disabled`	`boolean`	`false`	Disables the input.
`class / className`	`string`	`—`	Additional CSS class.
`…rest`	`HTMLInputAttributes`	`—`	All native input attributes (type, placeholder, value, onChange, etc.).

Field props

Props

Prop	Type	Default	Description
`label`	`string`	`—`	Label text above the input.
`htmlFor`	`string`	`—`	Links label to the input id.
`hint`	`string`	`—`	Helper text below the input. Rendered as alert when state is error.
`state`	`"idle" \| "error" \| "success"`	`"idle"`	Changes colour and icon of the hint text.
`required`	`boolean`	`false`	Shows asterisk on the label.

AI Context

Valid props

Prop	Values	Default
`state`	`"idle"`\|`"error"`\|`"success"`\|`"warning"`	`idle`
`required`	`true`\|`false`	`false`

Common AI mistakes

Applying state prop directly to Input→ Wrap Input in <Field state="error"> to apply validation styling
Mixing props label/hint AND FieldLabel/FieldError for the same field→ Pick one: either props-based (label/hint/state) OR composable parts

Quick examples

Error state field

<Field label="Email" state="error" hint="Invalid email format">
  <Input type="email" placeholder="you@example.com" />
</Field>

Search field with left icon

<Field label="Search">
  <Input leftElement={<SearchIcon />} placeholder="Search..." />
</Field>

← Dropdown Menu Label →