Input

One line of anything.

Default

With a label tied to it, which is what makes the label clickable.

A plain <input> wearing the theme. Every attribute an input has works here — type, placeholder, required, autoComplete — because they go straight through. A field marked invalid turns red on its own: that comes from aria-invalid, not from a class you add.

Installation

npx philcn@latest add input

The file is written into your project. It is yours from then on — change it as you like.

Examples

States

Ordinary, disabled, invalid, and the file picker.

Props

Prop	Type	What it does
Input.type	HTMLInputTypeAttribute	Any input type. The file type is styled too.
Input.disabled	boolean	Greys it out and takes it out of the tab order.

Types are read from the library itself, so this table cannot describe an option the code no longer has. Everything else you pass goes straight to the underlying <input>.

Worth knowing

Mark a wrong field with `aria-invalid`: it colours the field and tells a screen reader, where a red class would only do the first.