PersonaForm Group
Form label, caption, and other stuff.
Usage
Simple Usage
preview
vue
<template>
<p-form-group label="First Name">
<p-input />
</p-form-group>
</template>Advance Usage
This is description
vue
<template>
<p-form-group
label="First Name"
caption="This is caption"
description="This is description"
hint="This is hint"
required>
<p-input />
</p-form-group>
</template>Required Mode
Add little marker for required form using prop required.
preview
vue
<template>
<p-form-group
label="First Name"
required>
<p-input />
</p-form-group>
</template>Caption
Add sub-label using caption prop.
preview
vue
<template>
<p-form-group
label="First Name"
caption="Lorem Ipsum dolor sitar">
<p-input />
</p-form-group>
</template>Description
Add decription note below the form input using description prop.
Lorem Ipsum dolor sitar
vue
<template>
<p-form-group
label="First Name"
description="Lorem Ipsum dolor sitar">
<p-input />
</p-form-group>
</template>Error Message
Error message from validation can be add in here using prop error. Note, it'll replace description message.
Please fill this field
vue
<template>
<p-form-group
label="First Name"
description="Lorem Ipsum dolor sitar"
error="Please fill this field">
<p-input />
</p-form-group>
</template>Hint tooltip
Easy add hint tooltip using prop hint.
preview
vue
<template>
<p-form-group
label="First Name"
hint="Lorem Ipsum dolor sitar">
<p-input />
</p-form-group>
</template>API
Props
| Props | Type | Default | Description |
|---|---|---|---|
label | String | - | Form group label |
required | Boolean | false | Required flag |
caption | String | - | Sublabel caption |
description | String | - | Description note |
hint | String | - | Tooltip hint |
error | String | - | Error validation message |
Slots
| Name | Description |
|---|---|
| There no slots here | |
Events
| Name | Arguments | Description |
|---|---|---|
| There no event here | ||