noora/docs/components/textinput.md
Collects single-line text with Noora labels, hints, prefixes, and suffixes.
<noora-text-input label="Email" type="email" name="email"></noora-text-input>
| Attribute | Type or allowed values | Default | Description |
|---|---|---|---|
type | basic, email, card_number, search, password | "basic" | Controls the semantic field presentation. |
input-type | string | "text" | Sets the native input type for basic fields. |
label | string | None | Sets the field label. |
sublabel | string | None | Sets secondary label text. |
hint | string | None | Sets supporting text. |
hint-variant | default, destructive, disabled | "default" | Controls hint semantics. |
error | string | None | Sets the validation error. |
name | string | "" | Sets the submitted field name. |
value | string | "" | Gets or sets the field value. |
placeholder | string | None | Sets placeholder text. |
required | boolean | false | Marks the field as required. |
show-required | boolean | false | Shows the required indicator. |
min | string | None | Sets the native minimum value. |
max | string | None | Sets the native maximum value. |
step | string | None | Sets the native step value. |
disabled | boolean | false | Disables the field. |
| Property | Type | Description |
|---|---|---|
control | HTMLInputElement | null | The native input. |
form | HTMLFormElement | null | The associated form. |
| Event | Type | Description |
|---|---|---|
input | InputEvent | Emitted while the input value changes. |
change | Event | Emitted after the input value is committed. |
| Slot | Description |
|---|---|
prefix | A custom prefix for basic fields. |
suffix | A custom suffix. |
| Part | Description |
|---|---|
input | The native input. |
wrapper | The input wrapper. |
The component emits standard input and change events.
Use basic, email, card-number, search, and password presentations.
<noora-text-input name="basic" placeholder="Placeholder text..."><noora-icon slot="prefix" name="user"></noora-icon></noora-text-input>
<noora-text-input type="email" name="email" placeholder="[email protected]"></noora-text-input>
<noora-text-input type="card_number" name="card" placeholder="0000 0000 0000 0000"></noora-text-input>
<noora-text-input type="search" name="search" placeholder="Search..."></noora-text-input>
<noora-text-input type="password" name="password"></noora-text-input>
Give supporting guidance below the input.
<noora-text-input name="username" placeholder="Username" hint="Use letters, numbers, and underscores"></noora-text-input>
Communicate validation failures.
<noora-text-input name="email" placeholder="[email protected]" error="Enter a valid email address"></noora-text-input>
Provide a custom element after the native input.
<noora-text-input name="assignee" placeholder="Assignee"><noora-icon slot="suffix" name="user"></noora-icon></noora-text-input>
Show required and secondary label content.
<noora-text-input type="email" name="email" label="Email" required show-required></noora-text-input>
<noora-text-input type="password" name="password" label="Password" sublabel="Be safe!"></noora-text-input>
Compare empty and filled disabled fields.
<noora-text-input type="email" name="empty-email" label="Email" placeholder="[email protected]" hint="Use a tuist.dev address" disabled></noora-text-input>
<noora-text-input type="email" name="filled-email" value="[email protected]" hint="Use a tuist.dev address" disabled></noora-text-input>