UiField
The UiField component is used to capture text input from the user. It uses v-model, similar to a regular field. It has support for errors and validation.
Typings
typescript
interface ComponentProps {
type: FieldType;
title: string;
description?: string;
variant?: FieldVariants[ComponentProps['type']];
placeholder?: string;
disabled?: boolean;
autocomplete?: string;
readonly?: boolean;
clearable?: boolean;
rules?: string[];
validation?: FieldValidation;
settings?: FieldSettings;
mask?: string[];
name: string;
required?: boolean;
stacked?: boolean;
errors?: string;
modelValue?: string;
}Basic Implementation
vue
<template>
<div class="ui-flex ui-gap-4 ui-items-center ui-flex-wrap">
<ui-field
v-model="model"
type="TEXT"
title="Input Field"
name="field"
class="ui-w-full"
/>
</div>
</template>
<script setup lang="ts">
import { UiField } from 'portabilis-ui';
import { ref } from 'vue';
const model = ref();
</script>