@tresinternet/vue3-input-field NPM

InputField

A custom input field for Vue. Package is still in development.

🚀 Installation

npm install @tresinternet/vue3-input-field

📝 Usage

Import the component in your Vue file:

import InputField from '@tresinternet/vue3-input-field'

Use the component in your template:

<InputField
	id="filter-date"
>
	Label
</InputField>

🔧 Configuration

Props

Prop	Description	Usage	Type	Default value	Required
modelValue	The value of the input		`String`	`''`
id	The id of the input		`String`	`''`	✅
name	The name of the input		`String`	`''`
type	The type of the input		`String`	`text`
placeholder	The placeholder of the input		`String`	`''`
disabled	If the input is disabled		`Boolean`	`false`
required	If the input is required		`Boolean`	`false`
min	The min of the input		`String` \| `Number`	`''`
max	The max of the input		`String`	`''`
readonly	If the input is readonly		`Boolean`	`false`
options	The options of the select, checkbox-group or radio-group	Used for selects, checkbox-groups and radio-groups	`FieldOption[]`	`[]`
showInlineValidation
hasErrors
defaultCssClass
cssSettings
wrapLabel		Should the label be wrapped around the input-field. Useful for radio-buttons and checkboxes	`Boolean`
ariaLabel

Types

The type prop can be one of the following values: | Type | Description | | -------------- | ------------------------ | | text | The default type | | email | The email type | | password | The password type | | number | The number type | | date | The date type | | checkbox | The checkbox type | | checkbox-group | A group of checkboxes | | radio | The radio type | | radio-group | A group of radio buttons | | select | The select type |

Checkbox

🖼️ Examples

Checkbox

The minimum required props for a checkbox are id, v-model, type and value.

Notes:

A checked checkbox will have the value defined in the value prop
An unchecked checkbox will have a value of undefined
The label is automatically wrapped around the <slot>. This can be disabled by setting wrapLabel to false
The checkbox is automatically checked when the v-model is equal to the value prop
A class of #{base-css}--checked is added around the main wrapper when the checkbox is checked

Example

const testCheckbox = ref('')

<InputField
	id="test-type-checkbox"
	v-model="testCheckbox"
	type="checkbox"
	value="checkbox-checked"
>
	Test Input type = checkbox
</Inputfield>

Checkbox-group and radio-group

The checkbox-group and radio-group types require the options prop to be set. The options prop is an array of FieldOption objects.

Alternatively you can use the v-slot to render the options yourself. Each option in the options prop has it's own v-slot with the name of the option's value, prefixed with option- (eg. option-1).

Example

// The array in which the selected options will be stored
const model = ref([])

// The options for the checkbox-group
const options = [
	{
		value: 'option1',
		label: 'Option 1',
	},
	{
		value: 'option2',
		label: 'Option 2',
	},
	{
		value: 'option3',
		label: 'Option 3',
	},
]

<InputField
	id="checkboxes"
	v-model="model"
	type="checkbox-group"
	:options="options"
>
	<template #default>
		Global label
	</template>
	<template
		v-for="option in options"
		:key="option.value"
		#[`option-${option.value}`]
	>
		Label for specific option {{ option.label }}
	</template>
</InputField>