Form

Text Input

Label: || (input gets trimmed)

Label readonly:

Label:

Disabled:

Password Input

Label:

Disabled:

Email Input

Address:

Number Input

Step 2 for min -10 and max unset: 0

Disabled:

DateTime Input

Date/Time:

Readonly:

Date Only:

Tag Input

Tags: pecan, walnut

pecan

walnut

CheckBox

EnabledDisabledSame as above

RadioButton

Selected: one

RadioButton 1RadioButton 2RadioButton 3

Switch

disabled

Same as big

yes

Form Group

Some Label

Input Group

Left

Required Form

Usage

API

TextInput Props

Prop	Type	Default	Description
v-model	String	-	Two-way binding (trimmed)
placeholder	String	-	Placeholder text
readonly	Boolean	false	Read-only mode
disabled	Boolean	false	Disabled state
required	Boolean	false	Required for form validation

PasswordInput Props

Prop	Type	Default	Description
v-model	String	-	Two-way binding
placeholder	String	-	Placeholder text
disabled	Boolean	false	Disabled state
id	String	-	Input element id

NumberInput Props

Prop	Type	Default	Description
v-model	Number	-	Two-way binding
min	Number	-	Minimum value
max	Number	-	Maximum value
step	Number	1	Step increment
disabled	Boolean	false	Disabled state

DateTimeInput Props

Prop	Type	Default	Description
v-model	String	-	Two-way binding (datetime-local format)
readonly	Boolean	false	Read-only mode
dateOnly	Boolean	false	Show date picker only (type="date" instead of "datetime-local")
disabled	Boolean	false	Disabled state

CheckBox Props

Prop	Type	Default	Description
v-model	Boolean	-	Two-way binding
label	String	-	CheckBox label
disabled	Boolean	false	Disabled state
helpUrl	String	-	Help link URL
required	Boolean	false	Required for form validation

RadioButton Props

Prop	Type	Default	Description
v-model	String	-	Two-way binding
value	String	-	Radio value
name	String	-	Radio group name
label	String	-	Radio label
disabled	Boolean	false	Disabled state

Switch Props

Prop	Type	Default	Description
v-model	Boolean	-	Two-way binding
label	String	-	Switch label
disabled	Boolean	false	Disabled state

Switch Events

Event	Payload	Description
change	Boolean	Emitted on value change

TagInput Props

Prop	Type	Default	Description
v-model	Array	[]	Array of tag strings
placeholder	String	-	Placeholder text

FormGroup

Wrapper component for form label + input with proper spacing. Use with <label> and input components as children.

InputGroup

Groups inputs and buttons together with connected borders. Place any input/button components as children.

Pankow by Cloudron.io