Input — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download input -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Input } from "@/components/ui/input";

const args = {
  "type": "text",
  "placeholder": "Placeholder",
  "disabled": false,
  "clearable": false,
  "prefix": "",
  "suffix": "",
} satisfies Record<string, unknown> & {
  type?: "text" | "file" | "search" | "number" | "password";
};
</script>

<template>
  <Input v-bind="args" />
</template>

Examples

Text Input

<script setup lang="ts">
import { ref } from "vue";
import { Input } from "@/components/ui/input";

const args = {
  "type": "text",
  "placeholder": "Placeholder",
  "disabled": false,
} satisfies Record<string, unknown> & {
  type?: "text" | "file" | "search" | "number" | "password";
};
const value = ref("");
</script>

<template>
  <Input v-bind="args" v-model="value" />
</template>

Clearable

<script setup lang="ts">
import { ref } from "vue";
import { Input } from "@/components/ui/input";

const args = {
  "type": "text",
  "placeholder": "Placeholder",
  "disabled": false,
  "clearable": true,
} satisfies Record<string, unknown> & {
  type?: "text" | "file" | "search" | "number" | "password";
};
const value = ref("Value");
</script>

<template>
  <Input v-bind="args" v-model="value" />
</template>

Suffix Prefix

<script setup lang="ts">
import { Input } from "@/components/ui/input";

const args = {

};
</script>

<template>
  <Input prefix="$" suffix="USD" />
</template>

Suffix

<script setup lang="ts">
import { ref } from "vue";
import { Input } from "@/components/ui/input";

const args = {
  "type": "text",
  "placeholder": "Placeholder",
  "disabled": false,
  "suffix": ".com",
} satisfies Record<string, unknown> & {
  type?: "text" | "file" | "search" | "number" | "password";
};
const value = ref("example");
</script>

<template>
  <Input v-bind="args" v-model="value" inputClass="pr-12" />
</template>

Suffix Icon

<script setup lang="ts">
import { Input } from "@/components/ui/input";
import { Icon } from "@/components/ui/icon";

const args = {

};
</script>

<template>
  <Input
    ><template #suffix><Icon name="Mail" /></template
  ></Input>
</template>

Prefix Icon

<script setup lang="ts">
import { Input } from "@/components/ui/input";
import { Icon } from "@/components/ui/icon";

const args = {

};
</script>

<template>
  <Input
    ><template #prefix><Icon name="Search" /></template
  ></Input>
</template>

Custom Elements On Start

<script setup lang="ts">
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

const args = {

};
</script>

<template>
  <Input
    ><template #start><Button variant="ghost">Search</Button></template></Input
  >
</template>

Custom Elements On End

<script setup lang="ts">
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

const args = {

};
</script>

<template>
  <Input
    ><template #end><Button variant="ghost">Send</Button></template></Input
  >
</template>

Password

<script setup lang="ts">
import { ref } from "vue";
import { Input } from "@/components/ui/input";

const args = {
  "type": "password",
  "placeholder": "Password",
  "disabled": false,
} satisfies Record<string, unknown> & {
  type?: "text" | "file" | "search" | "number" | "password";
};
const value = ref("PlxjUHaTxyLF");
</script>

<template>
  <Input v-bind="args" v-model="value" />
</template>

Search

<script setup lang="ts">
import { ref } from "vue";
import { Input } from "@/components/ui/input";

const args = {
  "type": "search",
  "placeholder": "Search...",
  "disabled": false,
} satisfies Record<string, unknown> & {
  type?: "text" | "file" | "search" | "number" | "password";
};
const value = ref("");
</script>

<template>
  <Input v-bind="args" v-model="value" />
</template>

Number

<script setup lang="ts">
import { ref } from "vue";
import { Input } from "@/components/ui/input";

const args = {
  "type": "number",
  "placeholder": "Number",
  "disabled": false,
} satisfies Record<string, unknown> & {
  type?: "text" | "file" | "search" | "number" | "password";
};
const value = ref("4");
</script>

<template>
  <Input v-bind="args" v-model="value" />
</template>

File Input

<script setup lang="ts">
import { Input } from "@/components/ui/input";

const args = {

};
</script>

<template>
  <Input type="file" />
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default
`class`	`string`	`—`
`clearable`	`boolean`	`—`
`defaultValue`	`string`	`—`
`disabled`	`boolean`	`—`
`hidePasswordLabel`	`string`	`—`
`inputClass`	`string`	`—`
`modelValue`	`string`	`—`
`onBlur`	`(event: FocusEvent) => void`	`—`
`onChange`	`(value: any) => any`	`—`
`onClear`	`() => any`	`—`
`onFocus`	`(event: FocusEvent) => void`	`—`
`onInput`	`(event: Event) => void`	`—`
`placeholder`	`string`	`—`
`prefix`	`string`	`—`
`prefixIcon`	`IconName`	`—`
`showPasswordLabel`	`string`	`—`
`suffix`	`string`	`—`
`suffixIcon`	`IconName`	`—`
`type`	`string`	`—`
`value`	`string`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.