Forms

Text field

Input with the label on top, tile background and visible focus.

CSS only

Example

<label class="u-field">Email
  <input class="u-input" type="email" placeholder="[email protected]">
</label>

Text field ships in the full package, in unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

No build It's just CSS: with unslop.css on the page, the classes already work.

Class	What it does
`u-field`	The label that wraps label text and input, in a grid with 8px between them.
`u-input`	The input: 40px tall, fills the field's width.

Where	Attribute	What it says
label	wrapping the input	The label text becomes the field's name, no id needed.
:`focus-visible`	on `u-input`	2px outline in the text color.

Key	Does
Tab	focuses the field