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/textarea.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# TextArea
Collects multi-line text with labels, hints, errors, and character counting.
```html
<noora-text-area label="Description" name="description"></noora-text-area>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `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. |
| `rows` | `number` | `4` | Sets the visible row count. |
| `max-length` | `number` | `200` | Sets the maximum character count. |
| `show-character-count` | `boolean` | `true` | Shows the current character count. |
| `resize` | `none`, `both`, `horizontal`, `vertical` | `"vertical"` | Controls native resizing. |
| `disabled` | `boolean` | `false` | Disables the field. |
## Read-only properties
| Property | Type | Description |
| --- | --- | --- |
| `control` | `HTMLTextAreaElement \| null` | The native text area. |
| `form` | `HTMLFormElement \| null` | The associated form. |
## Events
| Event | Type | Description |
| --- | --- | --- |
| `input` | `InputEvent` | Emitted while the text value changes. |
| `change` | `Event` | Emitted after the text value is committed. |
## Styling parts
| Part | Description |
| --- | --- |
| `textarea` | The native text area. |
| `character-count` | The character counter. |
The component emits standard input and change events.
## Basic
Collect longer supporting text.
```html
<noora-text-area name="basic" placeholder="Enter your message..." max-length="200"></noora-text-area>
```
## Required
Mark required fields visibly and semantically.
```html
<noora-text-area name="required" label="Message" placeholder="This field is required" required show-required></noora-text-area>
```
## With hint
Give supporting guidance below the field.
```html
<noora-text-area name="feedback" label="Feedback" placeholder="Share your feedback..." hint="Please be as detailed as possible"></noora-text-area>
```
## Error
Communicate validation failures.
```html
<noora-text-area name="error" label="Message" placeholder="Enter your message..." error="This field is required"></noora-text-area>
```
## Disabled
Prevent editing while preserving context.
```html
<noora-text-area name="disabled" label="Disabled" placeholder="Enter your message..." disabled></noora-text-area>
```