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-input.json
{
"name": "TextInput",
"tagName": "noora-text-input",
"elementClassName": "NooraTextInput",
"className": "noora-text-input",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Collects single-line text with Noora labels, hints, prefixes, and suffixes.",
"usage": "<noora-text-input label=\"Email\" type=\"email\" name=\"email\"></noora-text-input>",
"attributes": [
{
"name": "type",
"property": "type",
"type": "string",
"values": ["basic", "email", "card_number", "search", "password"],
"default": "basic",
"description": "Controls the semantic field presentation."
},
{
"name": "input-type",
"property": "inputType",
"type": "string",
"default": "text",
"description": "Sets the native input type for basic fields."
},
{
"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": "min",
"property": "min",
"type": "string",
"description": "Sets the native minimum value."
},
{
"name": "max",
"property": "max",
"type": "string",
"description": "Sets the native maximum value."
},
{
"name": "step",
"property": "step",
"type": "string",
"description": "Sets the native step value."
},
{
"name": "disabled",
"property": "disabled",
"type": "boolean",
"default": false,
"description": "Disables the field."
}
],
"readonlyProperties": [
{
"name": "control",
"type": "HTMLInputElement | null",
"description": "The native input."
},
{
"name": "form",
"type": "HTMLFormElement | null",
"description": "The associated form."
}
],
"slots": [
{
"name": "prefix",
"description": "A custom prefix for basic fields."
},
{
"name": "suffix",
"description": "A custom suffix."
}
],
"cssParts": [
{
"name": "input",
"description": "The native input."
},
{
"name": "wrapper",
"description": "The input wrapper."
}
],
"events": [
{
"name": "input",
"type": "InputEvent",
"description": "Emitted while the input value changes."
},
{
"name": "change",
"type": "Event",
"description": "Emitted after the input value is committed."
}
],
"notes": ["The component emits standard input and change events."],
"examples": [
{
"id": "types",
"title": "Input types",
"description": "Use basic, email, card-number, search, and password presentations.",
"markup": "<noora-text-input name=\"basic\" placeholder=\"Placeholder text...\"><noora-icon slot=\"prefix\" name=\"user\"></noora-icon></noora-text-input>\n<noora-text-input type=\"email\" name=\"email\" placeholder=\"hello@tuist.dev\"></noora-text-input>\n<noora-text-input type=\"card_number\" name=\"card\" placeholder=\"0000 0000 0000 0000\"></noora-text-input>\n<noora-text-input type=\"search\" name=\"search\" placeholder=\"Search...\"></noora-text-input>\n<noora-text-input type=\"password\" name=\"password\"></noora-text-input>"
},
{
"id": "hint",
"title": "With hint",
"description": "Give supporting guidance below the input.",
"markup": "<noora-text-input name=\"username\" placeholder=\"Username\" hint=\"Use letters, numbers, and underscores\"></noora-text-input>"
},
{
"id": "error",
"title": "Error",
"description": "Communicate validation failures.",
"markup": "<noora-text-input name=\"email\" placeholder=\"hello@tuist.dev\" error=\"Enter a valid email address\"></noora-text-input>"
},
{
"id": "custom-suffix",
"title": "Custom suffix",
"description": "Provide a custom element after the native input.",
"markup": "<noora-text-input name=\"assignee\" placeholder=\"Assignee\"><noora-icon slot=\"suffix\" name=\"user\"></noora-icon></noora-text-input>"
},
{
"id": "labels",
"title": "Labels",
"description": "Show required and secondary label content.",
"markup": "<noora-text-input type=\"email\" name=\"email\" label=\"Email\" required show-required></noora-text-input>\n<noora-text-input type=\"password\" name=\"password\" label=\"Password\" sublabel=\"Be safe!\"></noora-text-input>"
},
{
"id": "disabled",
"title": "Disabled",
"description": "Compare empty and filled disabled fields.",
"markup": "<noora-text-input type=\"email\" name=\"empty-email\" label=\"Email\" placeholder=\"hello@tuist.dev\" hint=\"Use a tuist.dev address\" disabled></noora-text-input>\n<noora-text-input type=\"email\" name=\"filled-email\" value=\"hello@tuist.dev\" hint=\"Use a tuist.dev address\" disabled></noora-text-input>"
}
]
}