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/label.json
{
"name": "Label",
"tagName": "noora-label",
"elementClassName": "NooraLabel",
"className": "noora-label",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Labels a form control with optional supporting text.",
"previewLayout": "stack",
"usage": "<noora-label label=\"Email\" for=\"email\" required></noora-label>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"default": "",
"description": "Sets the main label."
},
{
"name": "sublabel",
"property": "sublabel",
"type": "string",
"description": "Sets secondary label text."
},
{
"name": "required",
"property": "required",
"type": "boolean",
"default": false,
"description": "Shows the required indicator."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Shows the disabled state."
},
{
"name": "for",
"property": "htmlFor",
"type": "string",
"description": "Associates the label with a control identifier."
}
],
"readonlyProperties": [],
"slots": [],
"cssParts": [
{
"name": "label",
"description": "The native label."
},
{
"name": "sublabel",
"description": "The secondary label."
}
],
"notes": [],
"examples": [
{
"id": "basic",
"title": "Basic labels",
"description": "Show the same simple, required, and supporting-label variations as the LiveView component.",
"markup": "<noora-label label=\"Email Address\" for=\"email-address\"></noora-label>\n<noora-label label=\"Password\" for=\"password\" required></noora-label>\n<noora-label label=\"Full Name\" for=\"full-name\" sublabel=\"(First and last name)\"></noora-label>\n<noora-label label=\"Company Email\" for=\"company-email\" sublabel=\"(Must be a work email address)\" required></noora-label>"
},
{
"id": "disabled",
"title": "Disabled labels",
"description": "Use disabled label colors when the associated control is unavailable.",
"markup": "<noora-label label=\"Organization\" for=\"organization\" disabled></noora-label>\n<noora-label label=\"Deployment environment\" for=\"deployment-environment\" sublabel=\"Only organization administrators can change this setting\" disabled></noora-label>"
},
{
"id": "edge-cases",
"title": "Edge cases",
"description": "Match the LiveView component's long and short label cases.",
"markup": "<noora-label label=\"Very Long Label That Might Wrap to Multiple Lines in Narrow Containers\" required></noora-label>\n<noora-label label=\"API Key\" sublabel=\"(This is a very long sublabel that provides detailed information about what this field should contain and how it will be used in the application)\"></noora-label>\n<noora-label label=\"ID\" required></noora-label>"
}
]
}