{"id":16009772,"url":"https://github.com/capitec/omni-components","last_synced_at":"2025-04-09T20:02:27.002Z","repository":{"id":59677323,"uuid":"516333301","full_name":"capitec/omni-components","owner":"capitec","description":"Modern UI component library for mobile and web.","archived":false,"fork":false,"pushed_at":"2024-12-09T12:46:05.000Z","size":59943,"stargazers_count":25,"open_issues_count":26,"forks_count":7,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-04-09T20:01:57.223Z","etag":null,"topics":["ui-library","vanilla-js","web-components"],"latest_commit_sha":null,"homepage":"https://capitec.github.io/open-source/docs/omni-components/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/capitec.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-21T10:54:38.000Z","updated_at":"2025-02-01T15:53:41.000Z","dependencies_parsed_at":"2022-09-19T19:51:30.416Z","dependency_job_id":"4ea9f2c8-6431-46e1-aa3c-d74f6fb4d02e","html_url":"https://github.com/capitec/omni-components","commit_stats":{"total_commits":1821,"total_committers":11,"mean_commits":"165.54545454545453","dds":0.613948380010983,"last_synced_commit":"ab65f832b9b64fb8e628559a1e30aa49ab069431"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capitec%2Fomni-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capitec%2Fomni-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capitec%2Fomni-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/capitec%2Fomni-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/capitec","download_url":"https://codeload.github.com/capitec/omni-components/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103864,"owners_count":21048245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ui-library","vanilla-js","web-components"],"created_at":"2024-10-08T13:04:09.568Z","updated_at":"2025-04-09T20:02:26.952Z","avatar_url":"https://github.com/capitec.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \".tooling/readme/blueprint.md\" ⚠️--\u003e\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./.tooling/readme/logos/omni.png\" alt=\"Logo\" width=\"128\" height=\"128\" /\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eOmni Components\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\u003cstrong\u003e\u003ccode\u003e@capitec/omni-components\u003c/code\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003eModern UI component library for mobile and web\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://npmcharts.com/compare/@capitec/omni-components?minimal=true\"\u003e\u003cimg alt=\"Downloads per week\" src=\"https://img.shields.io/npm/dw/@capitec/omni-components.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/@capitec/omni-components\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@capitec/omni-components.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://github.com/capitec/omni-components/actions/workflows/build.yml\"\u003e\u003cimg alt=\"GitHub Build\" src=\"https://github.com/capitec/omni-components/actions/workflows/build.yml/badge.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003ca href=\"https://github.com/capitec/omni-components/blob/develop/LICENSE\"\u003e\u003cimg alt=\"MIT License\" src=\"https://img.shields.io/github/license/capitec/omni-components\" height=\"20\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://capitec.github.io/open-source/docs/omni-components/\"\u003e\u003cimg alt=\"Docs\" src=\"https://img.shields.io/static/v1?label=docs\u0026message=capitec.github.io/open-source\u0026color=blue\u0026style=flat-square\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003cp align=\"center\"\u003e\n\t[\u003ca href=\"#introduction\"\u003eIntroduction\u003c/a\u003e]\n\t[\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e]\n\t[\u003ca href=\"#api-reference\"\u003eAPI Reference\u003c/a\u003e]\n\t[\u003ca href=\"#contributors\"\u003eContributors\u003c/a\u003e]\n\t[\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e]\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e🚩 View our \u003ca href=\"https://capitec.github.io/open-source/docs/omni-components\"\u003einteractive documentation\u003c/a\u003e for more info on component usage and live previews.\u003c/p\u003e\n\n\u003cbr\u003e\n\n\r\n[](#introduction)\r\n\r\n## Introduction\n\nOmni Components is a collection UI components for mobile and web that enable you to build omni-channel user experience that look great on every size of screen.\n\nCore features of the library include:\n- **Framework Agnostic** - Components are delivered as standard HTML [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components), that can be used in VanillaJS or within any framework, e.g. Lit, React, Vue, Angular, etc.\n- **Theming** - Components can be styled globally and individually using CSS properties.\n- **Responsive** - The components adapt responsively to the device that they render on to provide contextual user experiences.\n- **Mobile Optimized** - We develop for mobile first, and scale up to larger screen sizes from there.\n- **Lightweight** - The library is small, tree-shakes well, and comes with minimal dependencies, minimizing bloat to your project.\n\n\u003cbr\u003e\n\n\r\n[](#usage)\r\n\r\n## Usage\n\n1️⃣ \u0026nbsp; Install Omni Components in your project.\n\n```bash\nnpm install '@capitec/omni-components'\n```\n\n2️⃣ \u0026nbsp; Import the components you require. See [`INSTALLATION.md`](./INSTALLATION.md) for more detail.\n\n```js\n// JS import\nimport '@capitec/omni-components/button';\n\n// or HTML import\n\u003cscript type=\"module\" src=\"/node_modules/omni-components/dist/button/button.js\" \u003e\u003c/script\u003e\n```\n\n3️⃣ \u0026nbsp; Use the component tag in your web page.\n```html\n\u003comni-button type=\"primary\" label=\"Button\"\u003e\u003c/omni-button\u003e\n```\n\n### 💡 Example\n\n\nThis example shows how to import and use a few common components. Omni Components can be combined with 3rd party libraries, e.g. here we embed a [Google Material Icons](https://fonts.google.com/icons) as a slotted element within a ``\u003comni-button\u003e``.\n\n[CodePen](https://codepen.io/capitec-oss/pen/eYrLaGZ)\n\n```html\n\u003c!DOCTYPE html\u003e\n\n\u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\"\u003e\n\n        \u003ctitle\u003eOmni Components Demo\u003c/title\u003e\n\n        \u003cbase href=\"/\"\u003e\n      \n        \u003c!-- Import Google Material icons library --\u003e\n        \u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n\n        \u003c!-- Import Omni Components --\u003e\n        \u003cscript type=\"module\"\u003e\n          import \"https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/button/index.js\";\n          import \"https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/icon/index.js\";\n          import \"https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/check/index.js\";\n          import \"https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/radio/index.js\";\n          import \"https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/switch/index.js\";\n          import \"https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/text-field/index.js\";\n          import \"https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/number-field/index.js\";\n          import \"https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/password-field/index.js\";\n          import \"https://cdn.jsdelivr.net/npm/@capitec/omni-components@esm/dist/select/index.js\";\n\n          document.querySelector('omni-select').items = [\n            {\"id\":\"1\", \"label\":\"Peter Parker\"},\n            {\"id\":\"2\",\"label\":\"James Howlett\"},\n            {\"id\":\"3\", \"label\":\"Tony Stark\"},\n            {\"id\":\"4\",\"label\":\"Steve Rodgers\"},\n            {\"id\":\"5\", \"label\":\"Bruce Banner\"},\n            {\"id\":\"6\",\"label\":\"Wanda Maximoff\"},\n            {\"id\":\"7\", \"label\":\"TChalla\"},\n            {\"id\":\"8\",\"label\":\"Henry P. McCoy\"},\n            {\"id\":\"9\", \"label\":\"Carl Lucas\"},\n            {\"id\":\"10\",\"label\":\"Frank Castle\"}\n          ];\n        \u003c/script\u003e\n\n      \u003cstyle\u003e\n        :root {\n          --omni-theme-primary-color: #005AE0;\n          --omni-theme-primary-hover-color: #0052D8;\n          --omni-theme-primary-active-color: #004BD1;\n        }\n        \n        body {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: flex-start;\n          gap: 20px;\n        }\n        \n        omni-text-field, omni-number-field, omni-password-field, omni-select {\n          width: 300px;\n        }\n      \u003c/style\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n        \u003comni-button type=\"primary\" label=\"Button\" slot-position=\"left\"\u003e\n          \u003comni-icon icon=\"@material/thumb_up\"\u003e\u003c/omni-icon\u003e\n        \u003c/omni-button\u003e\n\n        \u003comni-check label=\"Check\" error=\"Required\"\u003e\u003c/omni-check\u003e\n\n        \u003comni-radio label=\"Radio\"\u003e\u003c/omni-radio\u003e\n\n        \u003comni-switch label=\"Switch\"\u003e\u003c/omni-switch\u003e\n\n        \u003comni-text-field label=\"Text Field\"\u003e\u003c/omni-text-field\u003e\n\n        \u003comni-number-field label=\"Number Field\"\u003e\u003c/omni-number-field\u003e\n\n        \u003comni-password-field label=\"Password Field\"\u003e\u003c/omni-password-field\u003e\n\n        \u003comni-select label=\"Select\" display-field=\"label\" idfield=\"id\"\u003e\u003c/omni-select\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cbr\u003e\n\n\r\n[](#api-reference)\r\n\r\n## API Reference\n\n\r\n\u003ctable style=\"max-width: 800px;\"\u003e\u003cthead\u003e\u003ctr\u003e\u003cth style=\"width: 100px;\"\u003eTag Name\u003c/th\u003e\u003cth style=\"width: 600px;\"\u003eDescription\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-loading-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nLoading icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-render-element](/Users/runner/work/omni-components/omni-components/src/render-element/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nElement that defers content rendering to a provided function / promise.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-modal](/Users/runner/work/omni-components/omni-components/src/modal/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl to display modal content with optional header and footer content.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-button](/Users/runner/work/omni-components/omni-components/src/button/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl that allows an action to be executed.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-alert](/Users/runner/work/omni-components/omni-components/src/alert/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nComponent that displays an alert.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-clear-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nClear icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-search-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nSearch icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-search-field](/Users/runner/work/omni-components/omni-components/src/search-field/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nSearch input control.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-chevron-down-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nChevron down icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-more-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nMore icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-select](/Users/runner/work/omni-components/omni-components/src/select/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl to get / set a value within a list of options.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-icon](/Users/runner/work/omni-components/omni-components/src/icon/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nComponent that displays an icon.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-color-field](/Users/runner/work/omni-components/omni-components/src/color-field/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nColor input control.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-text-field](/Users/runner/work/omni-components/omni-components/src/text-field/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl to input text.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-label](/Users/runner/work/omni-components/omni-components/src/label/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nLabel component that renders styled text.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-switch](/Users/runner/work/omni-components/omni-components/src/switch/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl to switch a value on or off.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-chevron-left-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nChevron left icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-chevron-right-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nChevron right icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-calendar](/Users/runner/work/omni-components/omni-components/src/calendar/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nCalendar component to set specific date.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-indeterminate-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nIndeterminate icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-check-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nCheck icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-check](/Users/runner/work/omni-components/omni-components/src/check/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl that allows a selection to be made.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-close-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nClose icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-chip](/Users/runner/work/omni-components/omni-components/src/chip/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl that can be used for input, setting attributes, or performing actions.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-arrow-right-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nArrow right icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-backspace-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nBackspace icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-caps-off-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nCaps off icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-caps-on-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nCaps on icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-caps-lock-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nCaps lock icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-next-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nNext icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-previous-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nPrevious icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-send-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nSend icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-keyboard-button](/Users/runner/work/omni-components/omni-components/src/keyboard/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nAn internal keyboard button control used in the keyboard component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-keyboard](/Users/runner/work/omni-components/omni-components/src/keyboard/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nA responsive on-screen keyboard control component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-currency-field](/Users/runner/work/omni-components/omni-components/src/currency-field/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl to enter a formatted currency value.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-calendar-icon](/Users/runner/work/omni-components/omni-components/src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nA calendar icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-date-picker](/Users/runner/work/omni-components/omni-components/src/date-picker/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl to get / set a specific date using a calendar.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-email-field](/Users/runner/work/omni-components/omni-components/src/email-field/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nEmail input control, used in forms for input validation and to display correct virtual keyboard on mobile.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-expander](/Users/runner/work/omni-components/omni-components/src/expander/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nComponent that groups together content in an expanded box.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-expander-group](/Users/runner/work/omni-components/omni-components/src/expander/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nLayout container that groups expanders.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-hyperlink](/Users/runner/work/omni-components/omni-components/src/hyperlink/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl to indicate an action to be executed. Typically used for navigational purposes.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-eye-hidden-icon](src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nHidden eye icon component\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-eye-visible-icon](src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nVisible eye icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-lock-closed-icon](src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nClosed lock icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-lock-open-icon](src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nOpen lock icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-minus-icon](src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nMinus icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-plus-icon](src/icons/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nPlus icon component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-number-field](/Users/runner/work/omni-components/omni-components/src/number-field/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nInput control to enter a single line of numbers.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-password-field](/Users/runner/work/omni-components/omni-components/src/password-field/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nPassword input control.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-pin-field](/Users/runner/work/omni-components/omni-components/src/pin-field/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nInput control to enter a masked numeric value.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-radio](/Users/runner/work/omni-components/omni-components/src/radio/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl to select a single value from a group of values.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-radio-group](/Users/runner/work/omni-components/omni-components/src/radio/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl to group radio components for single selection\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-tab](/Users/runner/work/omni-components/omni-components/src/tab/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl that can be used to display slotted content, for use within an Tab Group component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-tab-header](/Users/runner/work/omni-components/omni-components/src/tab/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nControl that can be used to display custom slotted content, for use within Tab Group component with associated Tab component.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-tab-group](/Users/runner/work/omni-components/omni-components/src/tab/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nComponent that displays content in tabs.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-toast-stack](/Users/runner/work/omni-components/omni-components/src/toast/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nA toast container that animates in and stacks toast elements.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e\r\n\r\n[omni-toast](/Users/runner/work/omni-components/omni-components/src/toast/README.md)\r\n\r\n\u003c/td\u003e\u003ctd\u003e\r\n\r\nComponent to visually notify a user of a message.\r\n\r\n\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\r\n\r\n\n\n\u003cbr\u003e\n\n\r\n[](#contributors)\r\n\r\n## Contributors\n\nMade possible by these fantastic people. 💖\n\nSee the [`CONTRIBUTING.md`](./CONTRIBUTING.md) guide to get involved.\n\n\n\u003c!-- readme: contributors -start --\u003e\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/chromaticWaster\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/22874454?v=4\" width=\"100;\" alt=\"chromaticWaster\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003echromaticWaster\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/BOTLANNER\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/16349308?v=4\" width=\"100;\" alt=\"BOTLANNER\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eBOTLANNER\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/stefan505\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/10812446?v=4\" width=\"100;\" alt=\"stefan505\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003estefan505\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/jn42lm1\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/54233338?v=4\" width=\"100;\" alt=\"jn42lm1\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ejn42lm1\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/capitec-oss\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/109588738?v=4\" width=\"100;\" alt=\"capitec-oss\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ecapitec-oss\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/Makhubedu\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/43409770?v=4\" width=\"100;\" alt=\"Makhubedu\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eMakhubedu\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/wscheffer\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/16539629?v=4\" width=\"100;\" alt=\"wscheffer\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003ewscheffer\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\u003c!-- readme: contributors -end --\u003e\n\n\u003cbr\u003e\n\n\r\n[](#license)\r\n\r\n## License\n\t\nLicensed under [MIT](https://opensource.org/licenses/MIT).\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003chr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n    \u003cpicture\u003e\n        \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./.tooling/readme/logos/capitec-logo-white.svg\"\u003e\n        \u003cimg alt=\"Capitec Logo\" src=\"./.tooling/readme/logos/capitec-logo-color.svg\" height=\"28\"\u003e\n    \u003c/picture\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003eWe are hiring 🤝 Join us! 🇿🇦\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.capitecbank.co.za/about-us/careers\"\u003ehttps://www.capitecbank.co.za/about-us/careers\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapitec%2Fomni-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcapitec%2Fomni-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcapitec%2Fomni-components/lists"}