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