Input

Props

Prop	Type	Default	Description
id	string	Auto-generated	The unique identifier for the input field.
icon	string	-	The icon used in the label (passed to FgLabel).
label	string	-	The label text for the input field.
info	string	-	Additional information or hint displayed below the input (FgInfo).
error	string	-	Error message to display (FgError).
size	string	-	the input size (xs, sm, lg, xl, 'xxl')
modelValue	string | number	''	The bound value of the input field. Supports v-model.
placeholder	string	-	Placeholder text for the input.
disabled	boolean	false	Whether the input field is disabled.
type	string	'text'	Input type (e.g., text, password, email).
startIcon	string	null	Icon class to display at the start of the input (e.g., bi-person-fill).
endIcon	string	null	Icon class to display at the end of the input (e.g., bi-eye-fill).

Install

import { FgInput } from 'fadgram-vue'

Basic usage

Preview

username:

vue

<fg-input type="text" v-model="username" placeholder="insert username" />

Input label & info

Preview

username

this is input info

vue

<fg-input
  type="text"
  v-model="username"
  label="username"
  placeholder="insert username"
  info="this is input info"
/>

Input label icon

Preview

username

vue

<fg-input
  type="text"
  v-model="username"
  icon="bi-person-fill"
  label="username"
  placeholder="insert username"
/>

Input error

Preview

username

Invalid username!

vue

<fg-input
  type="text"
  v-model="username"
  label="username"
  placeholder="insert username"
  error="Invalid username!"
/>

Input startIcon

Preview

url

vue

<fg-input type="text" v-model="url" label="url" placeholder="insert url" startIcon="bi-globe" />

Input endIcon

Preview

url

vue

<fg-input type="text" v-model="url" label="url" placeholder="insert url" endIcon="bi-clipboard" />

Input with startIcon & endIcon

Preview

url

vue

<fg-input
  type="text"
  v-model="url"
  label="url"
  placeholder="insert url"
  startIcon="bi-globe"
  endIcon="bi-clipboard"
/>

Input size

Preview

vue

<fg-input type="text" size="xs" placeholder="xs" />
<fg-input type="text" size="sm" placeholder="sm" />
<fg-input type="text" size="lg" placeholder="lg" />
<fg-input type="text" size="xl" placeholder="xl" />
<fg-input type="text" size="xxl" placeholder="xxl" />