Fields | Pear

PField

PField is the wrapper for one labeled control. It wires up the label, helper text, error text, invalid state, and disabled state. Checkboxes and radios bring their own labels.

Basic Field

NamePlease enter your full name.

vue

<p-field label="Name" helper="Please enter your full name.">
  <p-input v-model="name" name="name" autocomplete="name" />
</p-field>

Validation

EmailUsed for account notifications.

vue

<p-field
  label="Email"
  helper="Used for account notifications."
  :error="emailError"
>
  <p-input
    v-model="email"
    type="email"
    name="email"
    autocomplete="email"
  />
</p-field>

Disabled

Disabled field

vue

<p-field label="Disabled field" disabled>
  <p-input v-model="disabledValue" />
</p-field>

API

Props

Name	Type	Default	Description
`label`	`string`	-	Renders a label connected to the nested form control.
`helper`	`string`	-	Helper text shown when there is no error.
`error`	`string`	-	Error text. Also marks the field invalid.
`invalid`	`boolean`	false	Marks nested Pear form controls invalid through field context.
`disabled`	`boolean`	false	Disables nested Pear form controls through field context.

Slots

Name	Type	Default	Description
`default`	`slot`	-	A single field-aware form control such as PInput, PSelect, or PRange.