Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/textinput.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# TextInput
Collects single-line text with Noora labels, hints, prefixes, and suffixes.
```html
<noora-text-input label="Email" type="email" name="email"></noora-text-input>
```
## Attributes
| 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. |
## Read-only properties
| Property | Type | Description |
| --- | --- | --- |
| `control` | `HTMLInputElement \| null` | The native input. |
| `form` | `HTMLFormElement \| null` | The associated form. |
## Events
| Event | Type | Description |
| --- | --- | --- |
| `input` | `InputEvent` | Emitted while the input value changes. |
| `change` | `Event` | Emitted after the input value is committed. |
## Slots
| Slot | Description |
| --- | --- |
| `prefix` | A custom prefix for basic fields. |
| `suffix` | A custom suffix. |
## Styling parts
| Part | Description |
| --- | --- |
| `input` | The native input. |
| `wrapper` | The input wrapper. |
The component emits standard input and change events.
## Input types
Use basic, email, card-number, search, and password presentations.
```html
<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="hello@tuist.dev"></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>
```
## With hint
Give supporting guidance below the input.
```html
<noora-text-input name="username" placeholder="Username" hint="Use letters, numbers, and underscores"></noora-text-input>
```
## Error
Communicate validation failures.
```html
<noora-text-input name="email" placeholder="hello@tuist.dev" error="Enter a valid email address"></noora-text-input>
```
## Custom suffix
Provide a custom element after the native input.
```html
<noora-text-input name="assignee" placeholder="Assignee"><noora-icon slot="suffix" name="user"></noora-icon></noora-text-input>
```
## Labels
Show required and secondary label content.
```html
<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>
```
## Disabled
Compare empty and filled disabled fields.
```html
<noora-text-input type="email" name="empty-email" label="Email" placeholder="hello@tuist.dev" hint="Use a tuist.dev address" disabled></noora-text-input>
<noora-text-input type="email" name="filled-email" value="hello@tuist.dev" hint="Use a tuist.dev address" disabled></noora-text-input>
```