{"_id":"@cypress-design/vue-textbox","name":"@cypress-design/vue-textbox","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@cypress-design/vue-textbox","version":"1.0.1","typings":"./dist/index.d.ts","main":"./dist/index.umd.js","module":"./dist/index.es.mjs","exports":{".":{"import":"./dist/index.es.mjs","require":"./dist/index.umd.js","types":"./dist/index.d.ts"}},"scripts":{"build":"yarn build:module && yarn build:types","build:module":"yarn vite build","build:types":"yarn vue-tsc --project ./tsconfig.build.json"},"devDependencies":{"@cypress-design/constants-textbox":"*","@cypress-design/rollup-plugin-tailwind-keep":"*"},"license":"MIT","_id":"@cypress-design/vue-textbox@1.0.1","gitHead":"d2cf10fb4bd2160503c26f4feabdf38b7b84457c","description":"## Install","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-6D6gjUElKM/bIxQ41W3+leFbzODPu+/AmZrYeSdInZNIs8p1NnTIjXoibQa3TcjPnC6nne4Zgv/2BLuzIQ3LXg==","shasum":"f08ade24ca177bb3fc93a76103748789b5b69831","tarball":"https://registry.npmjs.org/@cypress-design/vue-textbox/-/vue-textbox-1.0.1.tgz","fileCount":17,"unpackedSize":155406,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDaRx4v4EoyQScH8HvQZr1S44WpMPdXdycPT902eSjvPgIgV0HbbQMNiZoH2eQCdmowZ8VMJee8ak9YhEWA0Dfi7nk="}]},"_npmUser":{"name":"cypress-npm-publisher","email":"cypress-npm-publisher@cypress.io"},"directories":{},"maintainers":[{"name":"cypress-npm-publisher","email":"cypress-npm-publisher@cypress.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-textbox_1.0.1_1770052301915_0.8617833263817112"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-02T17:11:41.723Z","1.0.1":"2026-02-02T17:11:42.058Z","modified":"2026-02-02T17:11:42.329Z"},"maintainers":[{"name":"cypress-npm-publisher","email":"cypress-npm-publisher@cypress.io"}],"description":"## Install","license":"MIT","readme":"# Textbox\n\n## Install\n\nThe textbox component is contained in the `@cypress-design/vue-textbox` package. You'll also want to install `@cypress-design/constants-textbox` to get proper types for TypeScript.\n\n```bash\nnpm install @cypress-design/vue-textbox @cypress-design/constants-textbox\n```\n\nor with yarn\n\n```bash\nyarn add @cypress-design/vue-textbox @cypress-design/constants-textbox\n```\n\n## Usage\n\n```ts\nimport Textbox from '@cypress-design/vue-textbox'\n```\n\n```vue\n\n\n\n \n\n```\n\n## Possible variants\n\nThe Textbox component supports four variants: `default`, `valid`, `invalid`, and `warning`. Each variant has different visual styling to indicate the input state.\n\n### Placeholders\n\nAll variants with placeholder text:\n\n```vue live\n\n\n\n
\n
\n \n \n \n \n
\n
\n\n```\n\n### Types\n\nAll variants with values:\n\n```vue live\n\n\n\n
\n
\n \n \n \n \n \n
\n
\n\n```\n\n### Dark mode\n\nAll variants in dark mode with placeholders:\n\n```vue live\n\n\n\n
\n
\n \n \n \n \n
\n
\n\n```\n\nAll variants in dark mode with values:\n\n```vue live\n\n\n\n
\n
\n \n \n \n \n \n
\n
\n\n```\n\n## Sizes\n\nThe Textbox supports three sizes: `32`, `40` (default), and `48`.\n\n```vue live\n\n\n\n
\n
\n \n \n \n
\n
\n\n```\n\nDark mode:\n\n```vue live\n\n\n\n
\n
\n \n \n \n
\n
\n\n```\n\n## Rounded\n\nThe Textbox supports a `rounded` prop to toggle between rounded and square corners. Shown here with size 40px:\n\n```vue live\n\n\n\n
\n
\n \n \n
\n
\n\n```\n\nDark mode:\n\n```vue live\n\n\n\n
\n
\n \n \n
\n
\n\n```\n\n## Options\n\nThe Textbox supports various combinations of optional elements. All sizes with labels on the left and right:\n\n```vue live\n\n\n\n
\n
\n \n \n \n \n \n \n \n \n
\n
\n\n```\n\nDark mode:\n\n```vue live\n\n\n\n
\n
\n \n \n \n \n \n \n \n \n
\n
\n\n```\n\n## Template Refs\n\nThe Textbox component supports template refs, allowing you to access the underlying input element directly:\n\n```vue\n\n
\n \n \n
\n\n\n\n```\n\nThis is useful for:\n\n- Programmatically focusing the input\n- Accessing input methods like `select()`, `setSelectionRange()`\n- Integrating with third-party libraries that need direct DOM access\n\n## Keyboard Event Handlers\n\nThe Textbox component supports keyboard event handlers for advanced interactions:\n\n```vue\n\n \n\n\n\n```\n\n### Available Keyboard Events\n\n- **@keydown**: Fired when a key is pressed down\n- **@keyup**: Fired when a key is released\n\n## Common Input Attributes\n\nThe Textbox component supports all standard HTML input attributes. This includes:\n\n### Form Attributes\n\n- **readonly**: Makes the input read-only\n- **required**: Marks the input as required for form validation\n- **name**: Input name for form submission\n- **form**: Associates input with a form element\n\n### Validation Attributes\n\n- **maxlength**: Maximum number of characters\n- **minlength**: Minimum number of characters\n- **pattern**: Regular expression pattern for validation\n- **title**: Tooltip text shown on validation error\n\n### Other Attributes\n\n- **readonly**: Alias for readonly\n- **tabindex**: Tab order\n- **autocomplete**: Autocomplete behavior\n- **spellcheck**: Enable/disable spell checking\n\nExample:\n\n```vue\n\n```\n\n## Real-World Use Cases\n\n### Form Input with Validation\n\n```vue\n\n
\n \n
{{ error }}
\n
\n\n\n\n```\n\n### Search Input with Keyboard Shortcuts\n\n```vue\n\n \n\n\n\n```\n\n### Controlled Input with Debouncing\n\n```vue\n\n
\n \n
Searching for: {{ debouncedValue }}
\n
\n\n\n\n```\n\n## Props\n\n(Props section will be auto-generated by vue-docgen-cli)\n","readmeFilename":"ReadMe.md","_rev":"1-935dc31db349d9c1815928c8a90d7a27"}