Rewrote all the docs - more noob friendly now.
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
+39
-52
@@ -1,36 +1,23 @@
|
||||
# Input
|
||||
|
||||
A styled text input with optional label and description. Supports all standard HTML input types and HTMX attributes.
|
||||
A styled single-line text field with an optional label and hint text below it. The workhorse of any form — use it for names, emails, passwords, search queries, or any other short text value.
|
||||
|
||||
---
|
||||
|
||||
## HTML structure
|
||||
## Quick example
|
||||
|
||||
```
|
||||
div.flex.flex-col.gap-1.5
|
||||
label[for={id}].text-sm.font-medium ← omitted when label is empty
|
||||
{label text}
|
||||
input[type, id, name, placeholder, class, $$HxAttrs$$]
|
||||
p.text-sm.text-muted-foreground ← omitted when description is empty
|
||||
{description text}
|
||||
```csharp
|
||||
new Input(
|
||||
id: "email",
|
||||
name: "email",
|
||||
inputType: "email",
|
||||
placeholder: "you@example.com",
|
||||
label: "Email address")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## CSS mechanics
|
||||
|
||||
| Class | Effect |
|
||||
|---|---|
|
||||
| `flex h-10 w-full rounded-md border border-input bg-background` | Full-width 40px height field with border |
|
||||
| `px-3 py-2 text-sm` | Inner padding and text size |
|
||||
| `ring-offset-background` | Focus ring offset matches the page background |
|
||||
| `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2` | Keyboard-visible focus ring |
|
||||
| `disabled:cursor-not-allowed disabled:opacity-50` | Disabled state |
|
||||
| `placeholder:text-muted-foreground` | Placeholder inherits muted color |
|
||||
|
||||
---
|
||||
|
||||
## Constructor signature
|
||||
## All the options
|
||||
|
||||
```csharp
|
||||
public Input(
|
||||
@@ -44,22 +31,22 @@ public Input(
|
||||
string hxAttrs = "")
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
| Parameter | What it does |
|
||||
|---|---|
|
||||
| `id` | Element id and label `for` target |
|
||||
| `name` | Form field name |
|
||||
| `inputType` | HTML type attribute: `text` / `email` / `password` / `number` / `search` / `tel` / `url` / `date` / `time` |
|
||||
| `placeholder` | Placeholder text |
|
||||
| `label` | Visible label above the field |
|
||||
| `description` | Helper text below the field |
|
||||
| `extraClasses` | Additional Tailwind classes on the input |
|
||||
| `hxAttrs` | Verbatim HTMX / data attributes appended to the input |
|
||||
| `id` | Element id. Also used by the `<label for="...">` so clicking the label focuses the input. |
|
||||
| `name` | Form field name — required if you want the value submitted with the form. |
|
||||
| `inputType` | HTML type: `text`, `email`, `password`, `number`, `search`, `tel`, `url`, `date`, `time`. |
|
||||
| `placeholder` | Greyed-out hint inside the field before the user types. |
|
||||
| `label` | Visible text label above the field. |
|
||||
| `description` | Small hint text below the field (e.g. "At least 8 characters"). |
|
||||
| `extraClasses` | Additional Tailwind classes on the `<input>` element. |
|
||||
| `hxAttrs` | Extra HTML attributes appended verbatim. Use for HTMX, `min`/`max`, `autocomplete`, etc. |
|
||||
|
||||
---
|
||||
|
||||
## Usage examples
|
||||
## Real-world examples
|
||||
|
||||
### Email and password fields
|
||||
### Login form fields
|
||||
|
||||
```csharp
|
||||
new Input(
|
||||
@@ -78,7 +65,18 @@ new Input(
|
||||
description: "At least 8 characters")
|
||||
```
|
||||
|
||||
### Search with HTMX live search
|
||||
Reading on the server:
|
||||
|
||||
```csharp
|
||||
public record Command(
|
||||
[property: FromForm] string Email,
|
||||
[property: FromForm] string Password
|
||||
);
|
||||
```
|
||||
|
||||
### Live search with HTMX
|
||||
|
||||
This fires a GET request 300ms after the user stops typing and swaps the results in:
|
||||
|
||||
```csharp
|
||||
new Input(
|
||||
@@ -89,7 +87,9 @@ new Input(
|
||||
hxAttrs: """hx-get="/search" hx-target="#results" hx-trigger="keyup changed delay:300ms"""")
|
||||
```
|
||||
|
||||
### Number input with constraints (via extraClasses / hxAttrs)
|
||||
### Number input with min/max constraints
|
||||
|
||||
Extra HTML attributes like `min` and `max` can be passed through `hxAttrs`:
|
||||
|
||||
```csharp
|
||||
new Input(
|
||||
@@ -100,24 +100,11 @@ new Input(
|
||||
hxAttrs: """min="1" max="100" step="1"""")
|
||||
```
|
||||
|
||||
### URL input
|
||||
---
|
||||
|
||||
```csharp
|
||||
new Input(
|
||||
id: "website",
|
||||
name: "websiteUrl",
|
||||
inputType: "url",
|
||||
placeholder: "https://example.com",
|
||||
label: "Website",
|
||||
description: "Include https://")
|
||||
```
|
||||
## How it works
|
||||
|
||||
### Reading in a form handler
|
||||
|
||||
```csharp
|
||||
public record Command(
|
||||
[property: FromForm] string Email,
|
||||
[property: FromForm] string Password
|
||||
Input renders a `<div>` wrapper containing an optional `<label>`, the `<input>`, and an optional description `<p>`. The label and description elements are omitted entirely from the HTML when not provided. The `hxAttrs` string is appended verbatim inside the `<input>` tag, so any valid HTML attribute can be passed through it.
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user