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/checkbox.json
{
"name": "Checkbox",
"tagName": "noora-checkbox",
"elementClassName": "NooraCheckbox",
"className": "noora-checkbox",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Lets a user select one or more independent options.",
"usage": "<noora-checkbox label=\"Send notifications\" name=\"notifications\"></noora-checkbox>",
"attributes": [
{
"name": "label",
"property": "label",
"type": "string",
"default": "",
"description": "Sets the visible label."
},
{
"name": "description",
"property": "description",
"type": "string",
"description": "Sets supporting text."
},
{
"name": "checked",
"property": "checked",
"type": "boolean",
"default": false,
"reflect": true,
"description": "Controls the checked state."
},
{
"name": "indeterminate",
"property": "indeterminate",
"type": "boolean",
"default": false,
"reflect": true,
"description": "Controls the mixed state."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"reflect": true,
"description": "Disables interaction."
},
{
"name": "name",
"property": "name",
"type": "string",
"default": "",
"description": "Sets the submitted field name."
},
{
"name": "value",
"property": "value",
"type": "string",
"default": "on",
"description": "Sets the submitted field value."
},
{
"name": "required",
"property": "required",
"type": "boolean",
"default": false,
"description": "Marks the field as required."
}
],
"readonlyProperties": [
{
"name": "control",
"type": "HTMLInputElement | null",
"description": "The native checkbox input."
},
{
"name": "form",
"type": "HTMLFormElement | null",
"description": "The associated form."
}
],
"slots": [],
"cssParts": [
{
"name": "root",
"description": "The checkbox label."
},
{
"name": "control",
"description": "The visual checkbox control."
},
{
"name": "label",
"description": "The label text."
}
],
"events": [
{
"name": "input",
"type": "InputEvent",
"description": "Emitted while the checked state changes."
},
{
"name": "change",
"type": "Event",
"description": "Emitted after the checked state changes."
}
],
"notes": ["The component emits standard input and change events."],
"examples": [
{
"id": "basic-states",
"title": "Basic states",
"description": "Checkboxes support unchecked, checked, and indeterminate states.",
"markup": "<noora-checkbox label=\"Enable notifications\"></noora-checkbox>\n<noora-checkbox checked label=\"Email alerts\"></noora-checkbox>\n<noora-checkbox indeterminate label=\"Select all items\"></noora-checkbox>"
},
{
"id": "disabled-states",
"title": "Disabled states",
"description": "Every selection state has a disabled presentation.",
"markup": "<noora-checkbox disabled label=\"Disabled unchecked\"></noora-checkbox>\n<noora-checkbox disabled checked label=\"Disabled checked\"></noora-checkbox>\n<noora-checkbox disabled indeterminate label=\"Disabled indeterminate\"></noora-checkbox>"
},
{
"id": "descriptions",
"title": "Descriptions",
"description": "Add supporting context below the label.",
"markup": "<noora-checkbox label=\"Marketing emails\" description=\"Receive updates about new features and promotions\"></noora-checkbox>\n<noora-checkbox checked label=\"Remember my preferences\" description=\"Save your settings for future visits\"></noora-checkbox>"
},
{
"id": "practical",
"title": "Practical examples",
"description": "Use checkboxes for agreements, subscriptions, and optional settings.",
"markup": "<noora-checkbox required label=\"I agree to the Terms of Service\" description=\"By checking this box, you agree to our terms and conditions\"></noora-checkbox>\n<noora-checkbox label=\"Subscribe to our newsletter\" description=\"Get weekly updates delivered to your inbox\"></noora-checkbox>\n<noora-checkbox checked label=\"Enable dark mode\" description=\"Switch to a darker color scheme\"></noora-checkbox>"
}
]
}