{"_id":"@bootcn-vue/field-text","_rev":"4-9585c88921519922aca1a2d9191fb2cf","name":"@bootcn-vue/field-text","dist-tags":{"latest":"0.2.3"},"versions":{"0.2.0":{"name":"@bootcn-vue/field-text","version":"0.2.0","keywords":["vue","vue3","bootstrap","input","form","field"],"author":"","license":"MIT","_id":"@bootcn-vue/field-text@0.2.0","maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"dist":{"shasum":"bf9382b8bdca904824f6fb1a9fffd9ab7afdaef1","tarball":"https://registry.npmjs.org/@bootcn-vue/field-text/-/field-text-0.2.0.tgz","fileCount":5,"integrity":"sha512-lqcqHq4hlk0A6RBGFjxVyfwcfqLDVMtwXDgdWxeieGHP8rhzRaGAj4AV8pA/rtCiP0aNa24rGAdX0A5FCX6QsA==","signatures":[{"sig":"MEUCICR4WWODnp/35olveOsia4P2bsD7GjordcOWuaL2+irwAiEAr8/EuFksrNU1rsy5NeF+C2jq8Jm0OxMteYwb2N8bkXI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":149153},"main":"./dist/index.js","type":"module","_from":"file:bootcn-vue-field-text-0.2.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"test":"vitest","build":"tsup"},"_npmUser":{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"},"_resolved":"/tmp/72a94696d53950fcf4aed4d021e85534/bootcn-vue-field-text-0.2.0.tgz","_integrity":"sha512-lqcqHq4hlk0A6RBGFjxVyfwcfqLDVMtwXDgdWxeieGHP8rhzRaGAj4AV8pA/rtCiP0aNa24rGAdX0A5FCX6QsA==","_npmVersion":"10.9.4","description":"Text input field component for Vue 3 using Bootstrap primitives","directories":{},"_nodeVersion":"22.21.1","dependencies":{"@bootcn-vue/forms":"0.4.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","tsup":"^8.3.5","vite":"^8.0.0-beta.7","vitest":"^3.0.2","typescript":"~5.8.2","unplugin-vue":"^7.1.0","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^5.2.1"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/field-text_0.2.0_1768262284592_0.20442433749756517","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@bootcn-vue/field-text","version":"0.2.1","keywords":["vue","vue3","bootstrap","input","form","field"],"author":"","license":"MIT","_id":"@bootcn-vue/field-text@0.2.1","maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"dist":{"shasum":"64580c40c1c706d04daec946f63a0f9758126ede","tarball":"https://registry.npmjs.org/@bootcn-vue/field-text/-/field-text-0.2.1.tgz","fileCount":5,"integrity":"sha512-1x0N7B9zweu4PzRWICRvP1cTL+i2yP/bMkfmAnG/7DFCPGz9tqZF/xWJsLsOy8Y5dQ0L/DpPG8okiKR1jh4zfw==","signatures":[{"sig":"MEQCIBsLwAT3tFgX3uP6opeowgB7qJPc3OxGR8hpIVUqC6iQAiAjK0smsQcILy0rR+zpnJcRPVtBw+9i/BY/71Z50I1C3w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":149153},"main":"./dist/index.js","type":"module","_from":"file:bootcn-vue-field-text-0.2.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"test":"vitest","build":"tsup"},"_npmUser":{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"},"_resolved":"/tmp/3d8547cde22c6d7de9513f6de59a29b9/bootcn-vue-field-text-0.2.1.tgz","_integrity":"sha512-1x0N7B9zweu4PzRWICRvP1cTL+i2yP/bMkfmAnG/7DFCPGz9tqZF/xWJsLsOy8Y5dQ0L/DpPG8okiKR1jh4zfw==","_npmVersion":"10.9.4","description":"Text input field component for Vue 3 using Bootstrap primitives","directories":{},"_nodeVersion":"22.21.1","dependencies":{"@bootcn-vue/forms":"0.5.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","tsup":"^8.3.5","vite":"^8.0.0-beta.7","vitest":"^3.0.2","typescript":"~5.8.2","unplugin-vue":"^7.1.0","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^5.2.1"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/field-text_0.2.1_1768291241303_0.254318499469383","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@bootcn-vue/field-text","version":"0.2.2","keywords":["vue","vue3","bootstrap","input","form","field"],"author":"","license":"MIT","_id":"@bootcn-vue/field-text@0.2.2","maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"dist":{"shasum":"add7d2400ab385b191fdd543ecf3870262153ba6","tarball":"https://registry.npmjs.org/@bootcn-vue/field-text/-/field-text-0.2.2.tgz","fileCount":5,"integrity":"sha512-r0yXTcbihDFikOcbDi2E25RSQQqXncLu8DgCgr0I4tjLagB2rfo0FNBHULya9e3m5PkF+rb6xD2fFX5jrI8/Rg==","signatures":[{"sig":"MEUCIQC3gv7Il8t0ikyjVfYghWTn1cRqGf+yDkevDBL7V/qUdwIgREN6JcK7IsAS9Qt1tLaupJHAsDpeD8RVxJeC8PwYqY4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":158622},"main":"./dist/index.js","type":"module","_from":"file:bootcn-vue-field-text-0.2.2.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"test":"vitest","build":"tsup"},"_npmUser":{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"},"_resolved":"/tmp/21e9f354d82bd1c58aca0a55e34c796c/bootcn-vue-field-text-0.2.2.tgz","_integrity":"sha512-r0yXTcbihDFikOcbDi2E25RSQQqXncLu8DgCgr0I4tjLagB2rfo0FNBHULya9e3m5PkF+rb6xD2fFX5jrI8/Rg==","_npmVersion":"10.9.4","description":"Text input field component for Vue 3 using Bootstrap primitives","directories":{},"_nodeVersion":"22.21.1","dependencies":{"@bootcn-vue/forms":"0.6.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.13","tsup":"^8.3.5","vite":"^8.0.0-beta.7","vitest":"^3.0.2","typescript":"~5.8.2","unplugin-vue":"^7.1.0","@vue/test-utils":"^2.4.6","@vitejs/plugin-vue":"^5.2.1"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/field-text_0.2.2_1768328915067_0.3506132164233786","host":"s3://npm-registry-packages-npm-production"}},"0.2.3":{"name":"@bootcn-vue/field-text","version":"0.2.3","description":"Text input field component for Vue 3 using Bootstrap primitives","type":"module","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"}},"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","peerDependencies":{"vue":"^3.5.0"},"dependencies":{"@bootcn-vue/forms":"0.6.2"},"devDependencies":{"@vitejs/plugin-vue":"^5.2.1","@vue/test-utils":"^2.4.6","tsup":"^8.3.5","typescript":"~5.8.2","unplugin-vue":"^7.1.0","vite":"^8.0.0-beta.7","vitest":"^3.0.2","vue":"^3.5.13"},"keywords":["vue","vue3","bootstrap","input","form","field"],"author":"","license":"MIT","scripts":{"build":"tsup","test":"vitest"},"_id":"@bootcn-vue/field-text@0.2.3","_integrity":"sha512-w/1sS3FCq0Vx+vXEigcFXy+tlw5lXAUiCpwXKNyedfBY5m2cNmKTefE9IPMqsPnqUYsqcT+cc+FKEt2GCLSBeA==","_resolved":"/tmp/1628a4f2d854f6d0ff1c2cb95e9f106f/bootcn-vue-field-text-0.2.3.tgz","_from":"file:bootcn-vue-field-text-0.2.3.tgz","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-w/1sS3FCq0Vx+vXEigcFXy+tlw5lXAUiCpwXKNyedfBY5m2cNmKTefE9IPMqsPnqUYsqcT+cc+FKEt2GCLSBeA==","shasum":"86e9eeab8efeaeeb9c16fa0d55b1b843b5be8030","tarball":"https://registry.npmjs.org/@bootcn-vue/field-text/-/field-text-0.2.3.tgz","fileCount":5,"unpackedSize":158622,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC2FNy6g6KsuFdL+Qq0BogXQ1kS2CNVtY7fSZwi+cwiwAIgIVkQhLEuXNG8qR4nlWl0eeFNtCJwVmaT+57V/TmNM+o="}]},"_npmUser":{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"},"directories":{},"maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/field-text_0.2.3_1768368472718_0.21345788195102067"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-12T23:58:04.509Z","modified":"2026-01-14T05:27:53.068Z","0.2.0":"2026-01-12T23:58:04.770Z","0.2.1":"2026-01-13T08:00:41.445Z","0.2.2":"2026-01-13T18:28:35.242Z","0.2.3":"2026-01-14T05:27:52.906Z"},"license":"MIT","keywords":["vue","vue3","bootstrap","input","form","field"],"description":"Text input field component for Vue 3 using Bootstrap primitives","maintainers":[{"name":"banavasi","email":"shashank.v.shandilya@gmail.com"}],"readme":"# @bootcn-vue/field-text\n\nComplete text input field component with label, validation, and help text for Vue 3.\n\n[![npm version](https://badge.fury.io/js/@bootcn-vue%2Ffield-text.svg)](https://www.npmjs.com/package/@bootcn-vue/field-text)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n## 📚 Documentation\n\n**[View Components & Examples](https://banavasi.github.io/Bootcn-vue/?path=/docs/forms-field-text--docs)** - Interactive Storybook\n\n## Overview\n\nA complete, production-ready text input field component that includes label, input, help text, error messages, and optional tooltips. Built on [@bootcn-vue/forms](https://www.npmjs.com/package/@bootcn-vue/forms) primitives with Bootstrap 5 styling.\n\n## Installation\n\n### Using CLI (Recommended)\n\n```bash\n# Initialize bootcn-vue (if not already done)\nnpx @bootcn-vue/cli@latest init\n\n# Add field-text component (when available)\nnpx @bootcn-vue/cli@latest add field-text\n```\n\n### Direct Installation\n\n```bash\nnpm install @bootcn-vue/field-text @bootcn-vue/forms @bootcn-vue/core bootstrap\n```\n\n## Features\n\n- ✅ **Complete Field** - Label, input, help text, and error messages in one component\n- ✅ **Multiple Input Types** - text, email, tel, url, search\n- ✅ **Validation** - Built-in error message display\n- ✅ **Accessible** - ARIA attributes and keyboard navigation\n- ✅ **Tooltips** - Optional info tooltips next to labels\n- ✅ **Flexible Labels** - Control heading level, size, and visibility\n- ✅ **Optional Badge** - Show \"Optional\" badge for non-required fields\n- ✅ **TypeScript** - Full type safety\n- ✅ **RDS Spacing** - Consistent spacing with RDS system\n\n## Usage\n\n### Basic Example\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldText } from \"@bootcn-vue/field-text\";\nimport { ref } from \"vue\";\n\nconst email = ref(\"\");\n</script>\n\n<template>\n  <FieldText\n    id=\"user-email\"\n    v-model=\"email\"\n    type=\"email\"\n    label=\"Email Address\"\n    placeholder=\"you@example.com\"\n    help-text=\"We'll never share your email\"\n    required\n  />\n</template>\n```\n\n### With Validation\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldText } from \"@bootcn-vue/field-text\";\nimport { ref, computed } from \"vue\";\n\nconst email = ref(\"\");\nconst error = computed(() => {\n  if (!email.value) return \"Email is required\";\n  if (!email.value.includes(\"@\")) return \"Invalid email format\";\n  return \"\";\n});\n</script>\n\n<template>\n  <FieldText\n    id=\"email\"\n    v-model=\"email\"\n    type=\"email\"\n    label=\"Email Address\"\n    placeholder=\"you@example.com\"\n    :error=\"error\"\n  />\n</template>\n```\n\n### With Tooltip\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldText } from \"@bootcn-vue/field-text\";\nimport { ref } from \"vue\";\n\nconst username = ref(\"\");\n</script>\n\n<template>\n  <FieldText\n    id=\"username\"\n    v-model=\"username\"\n    label=\"Username\"\n    placeholder=\"Choose a username\"\n    tooltip-message=\"Your username will be visible to other users\"\n    required\n  />\n</template>\n```\n\n### Optional Field\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldText } from \"@bootcn-vue/field-text\";\nimport { ref } from \"vue\";\n\nconst middleName = ref(\"\");\n</script>\n\n<template>\n  <FieldText\n    id=\"middle-name\"\n    v-model=\"middleName\"\n    label=\"Middle Name\"\n    placeholder=\"Optional\"\n    :is-optional=\"true\"\n    optional-text=\"Optional\"\n  />\n</template>\n```\n\n### Different Input Types\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldText } from \"@bootcn-vue/field-text\";\nimport { ref } from \"vue\";\n\nconst email = ref(\"\");\nconst phone = ref(\"\");\nconst website = ref(\"\");\nconst search = ref(\"\");\n</script>\n\n<template>\n  <!-- Email -->\n  <FieldText\n    id=\"email\"\n    v-model=\"email\"\n    type=\"email\"\n    label=\"Email\"\n    placeholder=\"you@example.com\"\n    autocomplete=\"email\"\n  />\n\n  <!-- Phone -->\n  <FieldText\n    id=\"phone\"\n    v-model=\"phone\"\n    type=\"tel\"\n    label=\"Phone Number\"\n    placeholder=\"(555) 555-5555\"\n    autocomplete=\"tel\"\n  />\n\n  <!-- Website -->\n  <FieldText\n    id=\"website\"\n    v-model=\"website\"\n    type=\"url\"\n    label=\"Website\"\n    placeholder=\"https://example.com\"\n    autocomplete=\"url\"\n  />\n\n  <!-- Search -->\n  <FieldText\n    id=\"search\"\n    v-model=\"search\"\n    type=\"search\"\n    label=\"Search\"\n    placeholder=\"Search...\"\n  />\n</template>\n```\n\n### Hidden Label (Visually)\n\nFor cases where the label is visually redundant but needed for accessibility:\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldText } from \"@bootcn-vue/field-text\";\nimport { ref } from \"vue\";\n\nconst search = ref(\"\");\n</script>\n\n<template>\n  <FieldText\n    id=\"search\"\n    v-model=\"search\"\n    type=\"search\"\n    label=\"Search\"\n    :label-visible=\"false\"\n    placeholder=\"Search...\"\n  />\n</template>\n```\n\n### Custom Label Styling\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldText } from \"@bootcn-vue/field-text\";\nimport { ref } from \"vue\";\n\nconst name = ref(\"\");\n</script>\n\n<template>\n  <FieldText\n    id=\"name\"\n    v-model=\"name\"\n    label=\"Full Name\"\n    label-level=\"h2\"\n    label-size=\"large\"\n    required\n  />\n</template>\n```\n\n### Disabled and Readonly\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldText } from \"@bootcn-vue/field-text\";\nimport { ref } from \"vue\";\n\nconst username = ref(\"johndoe\");\nconst id = ref(\"12345\");\n</script>\n\n<template>\n  <!-- Disabled -->\n  <FieldText\n    id=\"username\"\n    v-model=\"username\"\n    label=\"Username\"\n    :disabled=\"true\"\n  />\n\n  <!-- Readonly -->\n  <FieldText\n    id=\"user-id\"\n    v-model=\"id\"\n    label=\"User ID\"\n    :readonly=\"true\"\n    help-text=\"This field cannot be edited\"\n  />\n</template>\n```\n\n## Props\n\n### Specific Props\n\n| Prop           | Type                                              | Default  | Description                  |\n| -------------- | ------------------------------------------------- | -------- | ---------------------------- |\n| `type`         | `'text' \\| 'email' \\| 'tel' \\| 'url' \\| 'search'` | `'text'` | HTML input type              |\n| `autocomplete` | `string`                                          | -        | Autocomplete attribute value |\n\n### Base Props (from @bootcn-vue/forms)\n\n| Prop             | Type                                 | Default      | Description                          |\n| ---------------- | ------------------------------------ | ------------ | ------------------------------------ |\n| `id`             | `string`                             | **required** | Unique ID for the input element      |\n| `label`          | `string`                             | **required** | Label text for the field             |\n| `modelValue`     | `string`                             | `''`         | v-model binding for the input value  |\n| `placeholder`    | `string`                             | `undefined`  | Placeholder text                     |\n| `required`       | `boolean`                            | `false`      | Mark field as required               |\n| `disabled`       | `boolean`                            | `false`      | Disable the input                    |\n| `readonly`       | `boolean`                            | `false`      | Make input readonly                  |\n| `error`          | `string`                             | `undefined`  | Error message to display             |\n| `helpText`       | `string`                             | `undefined`  | Help text below input                |\n| `tooltipMessage` | `string`                             | `undefined`  | Tooltip next to label                |\n| `isOptional`     | `boolean`                            | `false`      | Show optional badge                  |\n| `optionalText`   | `string`                             | `'Optional'` | Custom optional badge text           |\n| `labelLevel`     | `'h1'\\|'h2'\\|'h3'\\|'h4'\\|'h5'\\|'h6'` | `'h3'`       | Heading level for label              |\n| `labelSize`      | `'small'\\|'medium'\\|'large'`         | `'small'`    | Label font size                      |\n| `labelVisible`   | `boolean`                            | `true`       | Show/hide label visually             |\n| `class`          | `string`                             | `undefined`  | Additional CSS classes for container |\n| `inputClass`     | `string`                             | `undefined`  | Additional CSS classes for input     |\n\n## Events\n\n| Event               | Payload  | Description                      |\n| ------------------- | -------- | -------------------------------- |\n| `update:modelValue` | `string` | Emitted when input value changes |\n\n## Accessibility\n\nThe component follows WCAG 2.1 guidelines:\n\n- ✅ **Proper Labels** - Label associated with input via `for`/`id`\n- ✅ **Required Fields** - `aria-required` attribute\n- ✅ **Error States** - `aria-invalid` and `aria-describedby` for errors\n- ✅ **Help Text** - Associated via `aria-describedby`\n- ✅ **Keyboard Navigation** - Full keyboard support\n- ✅ **Screen Readers** - All content announced properly\n- ✅ **Focus Management** - Proper focus indicators\n\n## Styling\n\nThe component uses Bootstrap 5 classes and RDS spacing:\n\n```vue\n<template>\n  <!-- Bootstrap form-control with RDS spacing -->\n  <FieldText\n    id=\"name\"\n    v-model=\"name\"\n    label=\"Name\"\n    class=\"mb-space-md\"\n    input-class=\"form-control-lg\"\n  />\n</template>\n```\n\n## Form Integration\n\nWorks seamlessly with form libraries:\n\n### With VeeValidate\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldText } from \"@bootcn-vue/field-text\";\nimport { useField } from \"vee-validate\";\n\nconst { value, errorMessage } = useField(\"email\", \"required|email\");\n</script>\n\n<template>\n  <FieldText\n    id=\"email\"\n    v-model=\"value\"\n    type=\"email\"\n    label=\"Email\"\n    :error=\"errorMessage\"\n    required\n  />\n</template>\n```\n\n### With Zod + Vue\n\n```vue\n<script setup lang=\"ts\">\nimport { FieldText } from \"@bootcn-vue/field-text\";\nimport { ref, computed } from \"vue\";\nimport { z } from \"zod\";\n\nconst emailSchema = z.string().email();\nconst email = ref(\"\");\n\nconst error = computed(() => {\n  const result = emailSchema.safeParse(email.value);\n  return result.success ? \"\" : result.error.issues[0].message;\n});\n</script>\n\n<template>\n  <FieldText\n    id=\"email\"\n    v-model=\"email\"\n    type=\"email\"\n    label=\"Email\"\n    :error=\"error\"\n  />\n</template>\n```\n\n## Dependencies\n\n- `@bootcn-vue/forms` - Form primitives\n- `@bootcn-vue/core` - Core utilities\n\n## Peer Dependencies\n\n- `vue` ^3.5.0\n- `bootstrap` ^5.3.0\n\n## Links\n\n- **[GitHub Repository](https://github.com/banavasi/Bootcn-vue)**\n- **[Documentation](https://banavasi.github.io/Bootcn-vue/)**\n- **[Report Issues](https://github.com/banavasi/Bootcn-vue/issues)**\n\n## Related Packages\n\n- [@bootcn-vue/cli](https://www.npmjs.com/package/@bootcn-vue/cli) - CLI for adding components\n- [@bootcn-vue/forms](https://www.npmjs.com/package/@bootcn-vue/forms) - Form primitives and components\n- [@bootcn-vue/field-password](https://www.npmjs.com/package/@bootcn-vue/field-password) - Password field component\n- [@bootcn-vue/core](https://www.npmjs.com/package/@bootcn-vue/core) - Core utilities\n\n## License\n\nMIT © [Shashank Shandilya](https://github.com/banavasi)\n","readmeFilename":"README.md"}