directus/docs/reference/app/components/v-input.md

Input

Displays the usual input. Can be used to model strings and numbers.

<v-input v-model="value" />

Attributes & Events

The HTML <input> element supports a huge amount of attributes and events. In order to support all of these, all props that aren't specially handled (see list below) will be passed on to the <input> element directly. This allows you to change anything you want on the input.

Prefixes / Suffixes

You can add any custom (text) prefix/suffix to the value in the input using the prefix and suffix slots.

Reference

Props

Prop	Description	Default	Type
value	Used with v-model to mirror the entered value	null	[String, Number]
autofocus	Autofocusses the input on render	false	Boolean
disabled	Set the disabled state for the input	false	Boolean
full-width	Render the input with 100% width	true	Boolean
prefix	Prefix the users value with a value	null	String
suffix	Show a value at the end of the input	null	String
slug	Force the value to be URL safe	false	Boolean
slug-separator	What character to use as separator in slugs	'-'	String
active	Force the focus state	false	Boolean
trim	Trim the start and end whitespace	false	Boolean
nullable	When active, sets an empty entry to null	true	Boolean
type	Can be text or number	'text'	String
max	The maximum number that can be entered	null	Number
min	The minimum number that can be entered	null	Number
step	In which unit steps should be counted up or down	1	Number
db-safe	Make the value save to be used with the DB	false	Boolean
hide-arrows	Hide the arrows that are used to increase or decrease a number	false	Boolean

Note: all other attached attributes are bound to the input HTMLElement in the component. This allows you to attach any of the standard HTML attributes like min, length, or pattern.

Slots

Slot	Description	Data
prepend-outer	Before the input	{ disabled: boolean, value: string or number; }
prepend	In the input, before the value, before the prefix	{ disabled: boolean, value: string or number; }
append	In the input, after the value, after the suffix	{ disabled: boolean, value: string or number; }
append-outer	After the input	{ disabled: boolean, value: string or number; }
input

CSS Variables

Variable	Default
--v-input-font-family	var(--family-sans-serif)
--v-input-placeholder-color	var(--foreground-subdued)

Events

Event	Description	Value
click	Fires when the input gets clicked
keydown	When a key has been pressed
input	Updated the modeled value	String or Number