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/hint-text.json
{
"name": "HintText",
"tagName": "noora-hint-text",
"elementClassName": "NooraHintText",
"className": "noora-hint-text",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Provides supporting or validation text for a form field.",
"usage": "<noora-hint-text label=\"Use at least 12 characters\"></noora-hint-text>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"default": "",
"description": "Sets the hint text."
},
{
"name": "variant",
"property": "variant",
"type": "string",
"values": ["default", "destructive", "disabled"],
"default": "default",
"description": "Controls the semantic presentation."
}
],
"readonlyProperties": [],
"slots": [],
"cssParts": [
{
"name": "hint",
"description": "The hint container."
}
],
"notes": [],
"examples": [
{
"id": "variants",
"title": "Variants",
"description": "Communicate default, destructive, and disabled supporting text.",
"markup": "<noora-hint-text label=\"Use at least eight characters\"></noora-hint-text>\n<noora-hint-text variant=\"destructive\" label=\"This field is required\"></noora-hint-text>\n<noora-hint-text variant=\"disabled\" label=\"Available after setup\"></noora-hint-text>"
},
{
"id": "content",
"title": "Content examples",
"description": "Support validation, guidance, limits, and availability messages.",
"markup": "<noora-hint-text label=\"Your profile is visible to teammates\"></noora-hint-text>\n<noora-hint-text label=\"Maximum 200 characters\"></noora-hint-text>\n<noora-hint-text variant=\"destructive\" label=\"Enter a valid email address\"></noora-hint-text>\n<noora-hint-text variant=\"disabled\" label=\"Connect a project to continue\"></noora-hint-text>"
}
]
}