Form Group

Form label, caption, and other stuff.

Usage

Simple Usage

preview

<template>
  <p-form-group label="First Name">
    <p-input />
  </p-form-group>
</template>

Advance Usage

^*

preview

<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

<template>
  <p-form-group
    label="First Name"
    required>
    <p-input />
  </p-form-group>
</template>

Caption

Add sub-label using caption prop.

preview

<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.

preview

<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.

preview

<template>
  <p-form-group
    label="First Name"
    description="Lorem Ipsum dolor sitar"
    error="Please fill this field">
    <p-input />
  </p-form-group>
</template>

With icon

Show error icon with prop error-icon. Note, it'll only show if prop error was provided too.

preview

<template>
  <p-form-group
    label="First Name"
    description="Lorem Ipsum dolor sitar"
    error="Please fill this field"
    error-icon>
    <p-input />
  </p-form-group>
</template>

Hint tooltip

Easy add hint tooltip using prop hint.

preview

<template>
  <p-form-group
    label="First Name"
    hint="Lorem Ipsum dolor sitar">
    <p-input />
  </p-form-group>
</template>

Horizontal Layout

^*

preview

<template>
  <p-form-group
    horizontal
    required
    label="First Name"
    description="This is description">
    <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
error-icon	Boolean	false	Show error icon
horizontal	Boolean	false	Horizontal layout

Slots

Name	Description
label	Content to used as label
caption	Content to used as caption
description	Content to used as description
hint	Content to used as hint
error	Content to used as error

Events

Name	Arguments	Description
There no event here