Pixel UI/Forms/Input

Input

A text field whose pixel border lights up as you type.

<piix-input>WebGLForm-ready

<piix-input name="email" type="email" placeholder="you@site.com">Email</piix-input>

Look

Palette

A dark pixel field. Focus it and light starts running round its border; every key sends a little ring out from the caret. Whatever you put inside is its label.

Installation

<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

<!-- just input (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/input.min.js"></script>

npm install piixpal

// once, in your entry file
import "piixpal";

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-input name="email" type="email" placeholder="you@site.com">Email</piix-input>
  );
}

Usage

<piix-input name="email" type="email" placeholder="you@site.com">Email</piix-input>

Examples

Looks

One attribute changes the whole style. Glass blurs whatever is behind it, so it shines over a scene or a photo.

<div class="ex-scene">
  <piix-scene kind="vista" fill></piix-scene>
  <piix-input look="glow" placeholder="you@site.com">Email</piix-input>
  <piix-input look="chrome" placeholder="you@site.com">Email</piix-input>
  <piix-input look="glass" placeholder="you@site.com">Email</piix-input>
  <piix-input look="riso" placeholder="you@site.com">Email</piix-input>
  <piix-input look="crt" placeholder="you@site.com">Email</piix-input>
</div>

<form class="ex-form" onsubmit="event.preventDefault(); this.querySelector('output').value = JSON.stringify(Object.fromEntries(new FormData(this)))">
  <piix-input name="name" placeholder="Ada">Name</piix-input>
  <piix-input name="email" type="email" required placeholder="you@site.com" palette="candy">Email</piix-input>
  <piix-glow-button type="submit">Join</piix-glow-button>
  <output></output>
</form>

API reference

Attribute	What it does	Default
`look`	`glow` `chrome` `glass` `riso` `crt`: the whole style. See Looks	`glow`
`name, type, value, placeholder, required, disabled, autocomplete, maxlength`	the same as on an `<input>`	–
`palette`	the colours: `lime` `aurora` `sunset` `ocean` `candy` `violet` `fire` `gameboy` `paper` `mono`, or your own, dark to light: `"#000,#6b4cff,#fff"`	`lime`
`pixel`	size of one pixel, in px	`3`

Events

Event	When
`input`	every keystroke
`change`	when the value is committed

Accessibility

Labelled by its content.
Form-associated with real validation: required and type="email" block submit like a native field.