Special Inputs | Pear

PInput

PInput handles the native odds and ends too: color pickers and file inputs, with the same field and v-model shape as the text inputs.

Color Picker

Favorite color

vue

<p-field label="Favorite color">
  <p-input v-model="favoriteColor" type="color" name="favorite-color" />
</p-field>

File Upload

ReceiptNo file selected

vue

<p-field label="Receipt" :helper="selectedFileName">
  <p-input v-model="receipt" type="file" name="receipt" accept=".pdf,image/*" />
</p-field>

Multiple Files

AttachmentsNo files selected

vue

<p-field label="Attachments" :helper="selectedAttachmentNames">
  <p-input
    v-model="attachments"
    type="file"
    name="attachments"
    accept=".pdf,image/*"
    multiple
  />
</p-field>

API

Color Input Props

Name	Type	Default	Description
`v-model`	`string`	-	Selected color as a native color input string, usually a hex value such as #00dfa2.
`type`	`'color'`	-	Renders a native color picker input.
`disabled`	`boolean`	false	Disables the color picker. Inherits from PField when present.
`invalid`	`boolean`	false	Sets aria-invalid. Inherits from PField when present.
`tooltip`	`string`	-	Optional Pico tooltip content.
`tooltipPlacement`	`PTooltipPlacement`	-	Optional Pico tooltip placement.

Color Input Events

Name	Type	Default	Description
`update:modelValue`	`string`	-	Emitted by v-model when the selected color changes.

File Input Props

Name	Type	Default	Description
`v-model`	`FileList \| null`	-	Selected files from the native file input.
`type`	`'file'`	-	Renders a native file upload input.
`accept`	`string`	-	Native file type filter passed through as an attribute, such as .pdf,image/*.
`multiple`	`boolean`	false	Native multiple file selection passed through as an attribute.
`disabled`	`boolean`	false	Disables the file input. Inherits from PField when present.
`invalid`	`boolean`	false	Sets aria-invalid. Inherits from PField when present.
`tooltip`	`string`	-	Optional Pico tooltip content.
`tooltipPlacement`	`PTooltipPlacement`	-	Optional Pico tooltip placement.

File Input Events

Name	Type	Default	Description
`update:modelValue`	`FileList \| null`	-	Emitted by v-model when the selected files change.