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/select.json
{
"name": "Select",
"tagName": "noora-select",
"elementClassName": "NooraSelect",
"className": "noora-dropdown",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Selects one value from a list of options.",
"usage": "<noora-select label=\"Country\" name=\"country\">\n <option value=\"es\">Spain</option>\n</noora-select>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"default": "",
"description": "Sets the placeholder label."
},
{
"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 selected value."
},
{
"name": "hint",
"property": "hint",
"type": "string",
"description": "Adds supporting text."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables the select."
},
{
"name": "required",
"property": "required",
"type": "boolean",
"default": false,
"description": "Marks the field as required."
},
{
"name": "open",
"property": "open",
"type": "boolean",
"default": false,
"description": "Controls whether the options menu is open."
}
],
"properties": [
{
"name": "options",
"type": "json",
"typescriptType": "Array<Record<string, unknown>>",
"default": [],
"description": "Defines options programmatically when declarative option children are not used. Each option can include label, value, icon, and disabled fields."
}
],
"readonlyProperties": [
{
"name": "control",
"type": "HTMLSelectElement | null",
"description": "The native select control."
},
{
"name": "form",
"type": "HTMLFormElement | null",
"description": "The associated form."
}
],
"slots": [
{
"name": "",
"description": "Declarative native option children."
}
],
"cssParts": [
{
"name": "select",
"description": "The visible select trigger."
},
{
"name": "content",
"description": "The options menu."
},
{
"name": "items",
"description": "The options list."
},
{
"name": "hint",
"description": "The supporting text."
}
],
"events": [
{
"name": "input",
"type": "InputEvent",
"description": "Emitted while the selected value changes."
},
{
"name": "change",
"type": "Event",
"description": "Emitted after the selected value changes."
},
{
"name": "noora-open-change",
"type": "CustomEvent<{ open: boolean }>",
"description": "Emitted when the options menu opens or closes."
},
{
"name": "noora-select",
"type": "CustomEvent<{ item: Record<string, unknown>; value: string }>",
"description": "Emitted with the selected option and value."
}
],
"notes": [
"The component emits standard input and change events.",
"Use data-icon on a declarative option to show an icon in the menu and selected trigger."
],
"examples": [
{
"id": "country",
"title": "Default",
"description": "Select a country from structured options.",
"markup": "<noora-select label=\"Country\" name=\"country\">\n <option value=\"es\">Spain</option>\n <option value=\"de\">Germany</option>\n <option value=\"fr\">France</option>\n</noora-select>"
},
{
"id": "selected",
"title": "Selected value",
"description": "Show the current value in the trigger.",
"markup": "<noora-select label=\"Country\" name=\"country\" value=\"de\">\n <option value=\"es\">Spain</option>\n <option value=\"de\">Germany</option>\n <option value=\"fr\">France</option>\n</noora-select>"
},
{
"id": "icons",
"title": "Option icons",
"description": "Add visual context to options and the selected trigger.",
"markup": "<noora-select label=\"Workspace\" name=\"workspace\" value=\"application\">\n <option value=\"application\" data-icon=\"category\">Application</option>\n <option value=\"framework\" data-icon=\"category\">Framework</option>\n <option value=\"package\" data-icon=\"category\">Package</option>\n</noora-select>"
},
{
"id": "hint",
"title": "Hint",
"description": "Explain how the selected value will be used.",
"markup": "<noora-select label=\"Country\" name=\"country\" hint=\"Used for regional settings.\">\n <option value=\"es\">Spain</option>\n <option value=\"de\">Germany</option>\n <option value=\"fr\">France</option>\n</noora-select>"
},
{
"id": "disabled",
"title": "Disabled",
"description": "Disable selection when the field is unavailable.",
"markup": "<noora-select label=\"Country\" name=\"country\" value=\"de\" disabled>\n <option value=\"es\">Spain</option>\n <option value=\"de\">Germany</option>\n <option value=\"fr\">France</option>\n</noora-select>"
}
]
}