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
components/text-area.json
{
"name": "TextArea",
"tagName": "noora-text-area",
"elementClassName": "NooraTextArea",
"className": "noora-text-area",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Collects multi-line text with labels, hints, errors, and character counting.",
"usage": "<noora-text-area label=\"Description\" name=\"description\"></noora-text-area>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"description": "Sets the field label."
},
{
"name": "sublabel",
"property": "sublabel",
"type": "string",
"description": "Sets secondary label text."
},
{
"name": "hint",
"property": "hint",
"type": "string",
"description": "Sets supporting text."
},
{
"name": "hint-variant",
"property": "hintVariant",
"type": "string",
"values": ["default", "destructive", "disabled"],
"default": "default",
"description": "Controls hint semantics."
},
{
"name": "error",
"property": "error",
"type": "string",
"description": "Sets the validation error."
},
{
"name": "name",
"property": "name",
"type": "string",
"default": "",
"description": "Sets the submitted field name."
},
{
"name": "value",
"property": "value",
"type": "string",
"default": "",
"description": "Gets or sets the field value."
},
{
"name": "placeholder",
"property": "placeholder",
"type": "string",
"description": "Sets placeholder text."
},
{
"name": "required",
"property": "required",
"type": "boolean",
"default": false,
"description": "Marks the field as required."
},
{
"name": "show-required",
"property": "showRequired",
"type": "boolean",
"default": false,
"description": "Shows the required indicator."
},
{
"name": "rows",
"property": "rows",
"type": "number",
"default": 4,
"description": "Sets the visible row count."
},
{
"name": "max-length",
"property": "maxLength",
"type": "number",
"default": 200,
"description": "Sets the maximum character count."
},
{
"name": "show-character-count",
"property": "showCharacterCount",
"type": "boolean",
"default": true,
"description": "Shows the current character count."
},
{
"name": "resize",
"property": "resize",
"type": "string",
"values": ["none", "both", "horizontal", "vertical"],
"default": "vertical",
"description": "Controls native resizing."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables the field."
}
],
"readonlyProperties": [
{
"name": "control",
"type": "HTMLTextAreaElement | null",
"description": "The native text area."
},
{
"name": "form",
"type": "HTMLFormElement | null",
"description": "The associated form."
}
],
"slots": [],
"cssParts": [
{
"name": "textarea",
"description": "The native text area."
},
{
"name": "character-count",
"description": "The character counter."
}
],
"events": [
{
"name": "input",
"type": "InputEvent",
"description": "Emitted while the text value changes."
},
{
"name": "change",
"type": "Event",
"description": "Emitted after the text value is committed."
}
],
"notes": ["The component emits standard input and change events."],
"examples": [
{
"id": "basic",
"title": "Basic",
"description": "Collect longer supporting text.",
"markup": "<noora-text-area name=\"basic\" placeholder=\"Enter your message...\" max-length=\"200\"></noora-text-area>"
},
{
"id": "required",
"title": "Required",
"description": "Mark required fields visibly and semantically.",
"markup": "<noora-text-area name=\"required\" label=\"Message\" placeholder=\"This field is required\" required show-required></noora-text-area>"
},
{
"id": "hint",
"title": "With hint",
"description": "Give supporting guidance below the field.",
"markup": "<noora-text-area name=\"feedback\" label=\"Feedback\" placeholder=\"Share your feedback...\" hint=\"Please be as detailed as possible\"></noora-text-area>"
},
{
"id": "error",
"title": "Error",
"description": "Communicate validation failures.",
"markup": "<noora-text-area name=\"error\" label=\"Message\" placeholder=\"Enter your message...\" error=\"This field is required\"></noora-text-area>"
},
{
"id": "disabled",
"title": "Disabled",
"description": "Prevent editing while preserving context.",
"markup": "<noora-text-area name=\"disabled\" label=\"Disabled\" placeholder=\"Enter your message...\" disabled></noora-text-area>"
}
]
}