Riupress UI

Appearance

FormInput ​

Props ​

autocomplete
Turning on/off auto-complete
type:String
default:off
values:on,off
size
Input size
type:String
default:md
values:sm, md, lg
type
Input type
type:String
default:text

Slots ​

left
Left slot - space before the input
right
Right slot - space behind the input

Events ​

update:modelValue
Updating model

Examples ​

Standard use + validation
Pretty cool info about email address.
html
<form-field name="email" :model="email" hint>
  <form-label text="Your e-mail address" />
  <form-input type="text" />
  <form-valid success="Something great!" />
  <form-info text="Pretty cool info about email address." />
</form-field>
ts
import { useField, useForm } from 'vee-validate';
import { toTypedSchema } from '@vee-validate/zod';
import * as zod from 'zod';
const validationSchema = toTypedSchema(
  zod.object({
    email: zod
      .string({
        required_error: 'Email jest wymagany',
        invalid_type_error: 'dfsdf'
      })
      .nonempty('s')
      .email(),
    password: zod.string().nonempty().min(8)
  })
)
const { handleSubmit } = useForm({
  validationSchema
})
const email = useField('email')
const password = useField('password')
const onSubmit = handleSubmit((error) => {
  console.log(error)
})

WARNING

The component for proper operation requires placing in the component FormField.

Standard use - disabled
Pretty cool info about email address.
html
<form-field name="email" :model="email" hint>
  <form-label text="Your e-mail address" />
  <form-input type="text" disabled />
  <form-valid success="Something great!" />
  <form-info text="Pretty cool info about email address." />
</form-field>