input.md

Input

ui.input · parts: Input · elements: <input>

Purpose

Input is a single-line native form control (checkbox/radio have their own primitives).

Notes

No additional notes for Input yet.

Input renders a native input element (default type text).

Props

Canonical (templ, Jinja2)	React / Solid	HTML (Svelte, Vue, WC)	Type	Default	Kind	Description
Type	type	type	"text" | "email" | "password" | "search" | "tel" | "url" | "number" | "range" | "date" | "datetime-local" | "month" | "week" | "time" | "color" | "file" | "hidden"	—	prop	input type (default text)
ID	id	id	string	—	passthrough attr
Name	name	name	string	—	passthrough attr
Value	value	value	string	—	passthrough attr
Placeholder	placeholder	placeholder	string	—	passthrough attr
Min	min	min	string	—	passthrough attr
Max	max	max	string	—	passthrough attr
Step	step	step	string	—	passthrough attr
Required	required	required	boolean	—	prop
Disabled	disabled	disabled	boolean	—	prop
ReadOnly	readOnly	readOnly	boolean	—	prop
AriaInvalid	aria-invalid	aria-invalid	string	—	passthrough attr
AriaDescribedBy	aria-describedby	aria-describedby	string	—	passthrough attr

Also accepts: class (className in React), extra attributes (rest props in UI frameworks, Attrs in templ/Jinja2, attrs in Twig/Latte; caller wins).

Variants

No variants: the primitive ships no visual classes; style it with token classes via class.

Children

Void / self-contained element: children are not accepted.

ARIA

• Computed/forwarded: aria-invalid, aria-describedby (omitted when empty).
• Typed ARIA props: aria-invalid, aria-describedby — static values only.

Classes escape hatch

Compose the part's classes without rendering it (custom root element, no asChild outside React):

Runtime	Helper
React / Solid / Vue / Svelte / WC	inputClasses({ ... }) from input/input.shared.ts
templ	input.InputClasses(input.InputProps{...})
Twig	ui8kit_classes('inputClasses', { class: '…' })
Latte	\UI8Kit\Latte\Classes::inputClasses(['class' => '…'])
Jinja2	input_classes(p)

Rendered DOM per state

Canonical renderer output (children = Content); all 9 runtimes are parity-tested to produce this DOM.

State	Props	HTML
defaults	—	<input type="text">
email	{"Type":"email","Name":"email","Placeholder":"you@example.com","Required":true}	<input type="email" name="email" placeholder="you@example.com" required>
range	{"Type":"range","Min":"0","Max":"10","Step":"2","Value":"4"}	<input type="range" value="4" min="0" max="10" step="2">
invalid	{"AriaInvalid":"true","AriaDescribedBy":"err","Disabled":true,"ReadOnly":true,"ID":"i1"}	<input type="text" id="i1" disabled readonly aria-invalid="true" aria-describedby="err">
Type=text	{"Type":"text"}	<input type="text">
Type=email	{"Type":"email"}	<input type="email">
Type=password	{"Type":"password"}	<input type="password">
Type=search	{"Type":"search"}	<input type="search">
Type=tel	{"Type":"tel"}	<input type="tel">
Type=url	{"Type":"url"}	<input type="url">
Type=number	{"Type":"number"}	<input type="number">
Type=range	{"Type":"range"}	<input type="range">
Type=date	{"Type":"date"}	<input type="date">
Type=datetime-local	{"Type":"datetime-local"}	<input type="datetime-local">
Type=month	{"Type":"month"}	<input type="month">
Type=week	{"Type":"week"}	<input type="week">
Type=time	{"Type":"time"}	<input type="time">
Type=color	{"Type":"color"}	<input type="color">
Type=file	{"Type":"file"}	<input type="file">
Type=hidden	{"Type":"hidden"}	<input type="hidden">
Required	{"Required":true}	<input type="text" required>
Disabled	{"Disabled":true}	<input type="text" disabled>
ReadOnly	{"ReadOnly":true}	<input type="text" readonly>

Usage

Fixture email ({"Type":"email","Name":"email","Placeholder":"you@example.com","Required":true}) — every snippet renders:

<input type="email" name="email" placeholder="you@example.com" required>

React (runtime notes)

import { Input } from "./ui/input/input";

<Input type="email" required name="email" placeholder="you@example.com" />

Vue 3 (runtime notes)

<script setup lang="ts">
import Input from "./ui/input/Input.vue";
</script>

<template>
  <Input type="email" required name="email" placeholder="you@example.com" />
</template>

Svelte 5 (runtime notes)

<script lang="ts">
  import Input from "./ui/input/Input.svelte";
</script>

<Input type="email" required={true} name="email" placeholder="you@example.com" />

SolidJS (runtime notes)

import { Input } from "./ui/input/input.solid";

<Input type="email" required name="email" placeholder="you@example.com" />

Web Components (runtime notes)

import { renderInput } from "./ui/input/input.wc";

document.body.append(renderInput({ type: "email", required: true, name: "email", placeholder: "you@example.com" }));

Go templ (runtime notes)

import "github.com/ui8kit/codegen/generated/templ/ui/input"

@input.Input(input.InputProps{Type: "email", Name: "email", Placeholder: "you@example.com", Required: true})

Twig (runtime notes)

{% include 'input/Input.html.twig' with { type: 'email', name: 'email', placeholder: 'you@example.com', required: true } only %}

Latte (runtime notes)

{include 'input/Input.latte', type: 'email', name: 'email', placeholder: 'you@example.com', required: true}

Jinja2 (runtime notes)

{% with p = {'Type': 'email', 'Name': 'email', 'Placeholder': 'you@example.com', 'Required': True} %}{% include 'ui/input/input.html.j2' %}{% endwith %}

---

Rules: contract · Index: docs