@tresinternet/vue3-input-field

InputField

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

🚀 Installation

Install the npm package:

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>

Development

Publishing

We publish using the np package. Config is in the package.json.

To preview a publish: np --preview

to deploy a branch different than main: np --any-branch