Please enter your name.
vue
<p-field label="Name" helper="Please enter your name.">
<p-input
v-model="name"
name="name"
placeholder="Enter your name"
autocomplete="name"
/>
</p-field>Used for account notifications.
vue
<p-field label="Email" helper="Used for account notifications." :error="emailError">
<p-input
v-model="email"
type="email"
name="email"
placeholder="you@example.com"
autocomplete="email"
/>
</p-field>Use something reasonably annoying to guess.
vue
<p-field label="Password" helper="Use something reasonably annoying to guess.">
<p-input
v-model="password"
type="password"
name="password"
placeholder="Password"
autocomplete="current-password"
/>
</p-field>Pico keeps search inputs looking like search inputs.
vue
<p-field label="Search" helper="Pico keeps search inputs looking like search inputs.">
<p-input
v-model="search"
type="search"
name="search"
placeholder="Search..."
/>
</p-field>Number input using the same PInput component.
vue
<p-field label="Age" helper="Number input using the same PInput component.">
<p-input
v-model="age"
type="number"
name="age"
placeholder="42"
min="0"
max="120"
/>
</p-field>Readonly text input.
vue
<p-field label="Reference ID" helper="Readonly text input.">
<p-input v-model="readonlyToken" readonly />
</p-field>