Input

A styled text input with label, hint, clear button, password toggle, and deep ASP.NET Core model binding.

<rhx-input>

Examples

Basic

Full Name

<rhx-input rhx-label="Full Name"
           rhx-placeholder="Enter your name"
           name="name" />

Types

Password

Number

<rhx-input rhx-label="Email" rhx-type="email"
           rhx-placeholder="name@example.com" name="email" />
<rhx-input rhx-label="Password" rhx-type="password"
           rhx-placeholder="Enter password" name="password" />
<rhx-input rhx-label="Number" rhx-type="number"
           rhx-placeholder="0" name="number" />

With Clear Button

<rhx-input rhx-label="Search"
           rhx-placeholder="Type to search..."
           rhx-with-clear="true"
           name="search" />

Password Toggle

Password

<rhx-input rhx-label="Password"
           rhx-type="password"
           rhx-password-toggle="true"
           name="pw" />

Sizes

Small

Medium

Large

<rhx-input rhx-label="Small" rhx-size="small" name="sm" />
<rhx-input rhx-label="Medium" name="md" />
<rhx-input rhx-label="Large" rhx-size="large" name="lg" />

States

Disabled

Readonly

<rhx-input rhx-label="Disabled" rhx-disabled="true"
           value="Cannot edit" name="disabled" />
<rhx-input rhx-label="Readonly" rhx-readonly="true"
           value="Read only value" name="readonly" />

htmx Live Search

Live Search

Results will appear here...

<rhx-input rhx-label="Live Search"
           rhx-placeholder="Type to search..."
           rhx-with-clear="true"
           name="q"
           hx-get="/Docs/Components/Input?handler=Search"
           hx-trigger="input changed delay:300ms"
           hx-target="#search-results" />
<div id="search-results">Results will appear here...</div>

Properties

Property	Type	Default	Description
`rhx-for`	`ModelExpression`	`-`	ASP.NET Core model expression for two-way binding
`name`	`string`	`-`	The form field name
`value`	`string`	`-`	The current value
`rhx-label`	`string`	`-`	Label text displayed above the input
`rhx-hint`	`string`	`-`	Hint text displayed below the input
`rhx-size`	`string`	`medium`	Input size: small, medium, large
`rhx-disabled`	`bool`	`false`	Whether the input is disabled
`rhx-readonly`	`bool`	`false`	Whether the input is read-only
`rhx-required`	`bool`	`false`	Whether the field is required
`rhx-placeholder`	`string`	`-`	Placeholder text
`rhx-type`	`string`	`text`	Input type: text, email, password, number, tel, url, search, date
`rhx-with-clear`	`bool`	`false`	Show a clear button when the input has a value
`rhx-password-toggle`	`bool`	`false`	Show a password visibility toggle
`rhx-filled`	`bool`	`false`	Use filled appearance (background instead of border)
`rhx-pattern`	`string`	`-`	Regex pattern for validation
`rhx-minlength`	`int?`	`-`	Minimum text length
`rhx-maxlength`	`int?`	`-`	Maximum text length
`rhx-min`	`string`	`-`	Minimum value for number/date types
`rhx-max`	`string`	`-`	Maximum value for number/date types
`rhx-step`	`string`	`-`	Step increment for number types
`rhx-autocomplete`	`string`	`-`	Autocomplete hint (e.g. email, off)
`rhx-autofocus`	`bool`	`false`	Whether the input receives focus on page load
`aria-label`	`string`	`-`	Accessible label for the native input