{"id":24437109,"url":"https://github.com/zuripl/svelte-segmented-input","last_synced_at":"2026-01-22T12:52:23.242Z","repository":{"id":45030989,"uuid":"513170608","full_name":"ZuriPL/svelte-segmented-input","owner":"ZuriPL","description":"A simple component for number-only segmented input. Ideal for 2FA codes.","archived":false,"fork":false,"pushed_at":"2023-09-14T10:58:49.000Z","size":61,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T11:46:23.943Z","etag":null,"topics":["input","segmented-input","svelte"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/svelte-segmented-input","language":"Svelte","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/ZuriPL.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-12T14:15:45.000Z","updated_at":"2024-05-11T20:27:39.000Z","dependencies_parsed_at":"2022-09-26T20:01:30.745Z","dependency_job_id":null,"html_url":"https://github.com/ZuriPL/svelte-segmented-input","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZuriPL%2Fsvelte-segmented-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZuriPL%2Fsvelte-segmented-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZuriPL%2Fsvelte-segmented-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZuriPL%2Fsvelte-segmented-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZuriPL","download_url":"https://codeload.github.com/ZuriPL/svelte-segmented-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248599297,"owners_count":21131257,"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":["input","segmented-input","svelte"],"created_at":"2025-01-20T18:15:21.997Z","updated_at":"2026-01-22T12:52:23.178Z","avatar_url":"https://github.com/ZuriPL.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-segmented-input [![svelte-segmented-input](https://img.shields.io/badge/-svelte--segmented--input-orange)](https://github.com/ZuriPL/svelte-segmented-input)\n\nA simple component for number-only segmented input. Ideal for 2FA codes. Minified and gzipped the package is ~9kb, and can be used with svelte's client-side component API in non-svelte projects.\n\n**NOTE:** Deprecated\n\n## HOW TO USE:\n\n### 1. Svelte\n\n```svelte\n\u003cscript\u003e\n    import SvelteSegmentedInput from 'svelte-segmented-input'\n\n    let value\n\n    let callback = (e) =\u003e console.log(e)\n\u003c/script\u003e\n\n\u003cSvelteSegmentedInput bind:value=\"{value}\" length=\"{6}\" style=\"{{borderColor: 'black', inputWidth: '50%'}}\" on:valueEntered=\"{callback}\" /\u003e\n```\n\n`value` is the current value of the input as a string with spaces in non-populated fields. Setting rhe variable value will change the input value to the given input if it's a number or can be coerced to a number.\n\n`length` is the number of fields. accepts number or an array of numbers. when an array is passed, it will create the segments such as for an array [3, 3, 4] the input will look like this: [] [] [] - [] [] [] - [] [] [] [].\n\n`style` is an object which holds sets custom CSS properties to control the styling of the component.\n\n`on:valueEntered` is an event that fires every time a full value is entered. `event.detail.value` is the value that was entered.\n\n### 2. Vanilla JS (with module bundler)\n\n```javascript\nimport SegmentedInput from 'svelte-segmented-input'\n\nconst component = new SegmentedInput({\n\ttarget: document.querySelector('#app'), // where to attach the component in the DOM\n\tprops: {\n\t\tlength: 6, // length of the input; can be an array to specify segments\n\t\tvalue: 123, // initial value\n\t},\n})\n\n// event listener. removeEvent() will remove the event listener\nconst removeEvent = component.$on('valueEntered', (e) =\u003e console.log(e.detail.value))\n\n// log the current value of the component\nconsole.log(component.value)\n```\n\nSetting value in the props object will not trigger the `valueEntered` event, however setting it using `component.value` will\n\n## STYLING:\n\n### input\n\n-   font-size: var(--fontSize, 2rem);\n-   border-radius: var(--borderRadius, 0.4rem);\n-   border: var(--borderWidth, 2px) solid var(--borderColor, #e5e5e5);\n-   padding: var(--padding, 0.25rem 1rem);\n-   color: var(--textColor, black);\n-   background-color: var(--bgInput, transparent);\n\n### input:focus\n\n-   border: var(--borderWidth, 2px) solid var(--borderColorActive, #5f91f0);\n\n### input-wrapper\n\n-   width: var(--inputWidth, 100%);\n-   background-color: var(--bgWrapper, transparent);\n-   gap: var(--gap);\n    // if gap is not set or is set to 'auto', it's treated as setting `justify content: space-between;` instead\n\nAlternatively, you can target each item with a descendant selector, as all elements are inside a div with id #input-wrapper.\n\n## KNOWN ISSUES:\n\n1. This solution isn't accessible, as it relies on multiple input elements and breaks a lot of browsers behaviours (i. e. ctrl+f to search). This is a milestone I'm trying to reach with v2.0\n2. On mobile phones it is possible to input + and - characters. I have no idea how it happens.\n3. Binding the `length` property will break when length is smaller than the number of fields that are populated. Please, don't bind the `length` property.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzuripl%2Fsvelte-segmented-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzuripl%2Fsvelte-segmented-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzuripl%2Fsvelte-segmented-input/lists"}