{"_id":"@solid-aria/textfield","name":"@solid-aria/textfield","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@solid-aria/textfield","version":"0.0.1","private":false,"description":"Primitives for building accessible text field component.","keywords":["solid","aria","headless","design","system","components"],"homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/textfield#readme","bugs":{"url":"https://github.com/solidjs-community/solid-aria/issues"},"repository":{"type":"git","url":"git+https://github.com/solidjs-community/solid-aria.git"},"license":"MIT","author":{"name":"Fabien Marie-Louise","email":"fabienml.dev@gmail.com"},"contributors":[],"sideEffects":false,"type":"module","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","dependencies":{"@solid-aria/focus":"^0.1.4","@solid-aria/label":"^0.1.4","@solid-aria/types":"^0.1.4","@solid-aria/utils":"^0.2.1","@solid-primitives/props":"^2.1.7","@solid-primitives/utils":"^2.1.0"},"devDependencies":{"solid-js":"^1.4.4"},"peerDependencies":{"solid-js":"^1.4.4"},"publishConfig":{"access":"public"},"primitive":{"name":"textfield","stage":0,"list":[],"category":""},"scripts":{"build":"tsup","clean":"rm -rf .turbo && rm -rf node_modules && rm -rf dist","dev":"vite serve dev --host","test":"jest --passWithNoTests","test:watch":"jest --watch --passWithNoTests","typecheck":"tsc --noEmit"},"_id":"@solid-aria/textfield@0.0.1","_integrity":"sha512-minlrTKh7Zzu0I/x3s/xK4Cgu/Lb0W8ujuG71gMiUOwCRWAm4H3Jsm4mXjkK9tQo7gW8wb/RzlKa2ytY1TCG+g==","_resolved":"/tmp/2a8c27a296dd55ac889081cc37461105/solid-aria-textfield-0.0.1.tgz","_from":"file:solid-aria-textfield-0.0.1.tgz","_nodeVersion":"17.9.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-minlrTKh7Zzu0I/x3s/xK4Cgu/Lb0W8ujuG71gMiUOwCRWAm4H3Jsm4mXjkK9tQo7gW8wb/RzlKa2ytY1TCG+g==","shasum":"860d69e642bac4fe3d793bbfac1a2e408da023dc","tarball":"https://registry.npmjs.org/@solid-aria/textfield/-/textfield-0.0.1.tgz","fileCount":6,"unpackedSize":24890,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB4FOZosZ8oRB9+iUCGp/0Zvdz/njWWOYe5iFMnt+WsgIhAM0nk0R1RqDvfAQdVSODVUJAuXIjqoN3T/XSO5oMRDyJ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Sb9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7Fg/9H+ptEDDj91IB+ymi4l4u8X8DO9p6f3JZqbezUCDdtip+g7Cu\r\n+k58c+rZ0me0w91YZAI6NdDowE0cPbHkI0n/WWLQnQdBvRUTsmZb0T8xPRsk\r\nPucMStut09FM0YRCWPsnFYQtRatH4b3csDxvczqf64cujlT51ekHelOHZ/sq\r\nZMafkUn8ODJdLoKVBJhLN1Rb2K3i11akKAk2W26uj9ipJRZzd1YD54PSnBmQ\r\n4fJErzHtCESnRpvJMDYN0HxE5ml7q50WEdnyYVE/GOMA3aF8U7xaSM1GFxQD\r\nEp2PUqF3JYSpp+gc6kfMutxnDeunHRTqQPPItGOpnIJqjgxN0YU2j4+NjHsc\r\nB5L6LsxlXMNXvJcLsDCaZNXzpl7OKcqAnohdez5eLMjW3CFDPgYmMgrJtEWG\r\nc/OoVTZFAUuVGJ6+LNUdIsSnAfMdxtmjjvSK3Qr2G/nblW+/gcMyjUPvrMoo\r\nwL1cnbGJdxlVha4njf/2d0FfLq5rHTi34K0uxFcGeSwLOytqIHT82rOI95IJ\r\nsfjfrsJoakCeFpjeWin31IC343KqSZldfjExmE4Kd7QXq9Oyglz/BUFSjkOP\r\nsmyOKQmjSZpgeuRBvmQOH6DvSgCuY7dnKM46pU20ELd2IWcUEDNLxExA1/YT\r\nKRmZ9ZdbfffYtezz4ykmuYUhX63cYEsTJjo=\r\n=AUWz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"fabienml","email":"fabienml.dev@gmail.com"},"directories":{},"maintainers":[{"name":"fabienml","email":"fabienml.dev@gmail.com"},{"name":"davedbase","email":"dave.dibiase@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/textfield_0.0.1_1657874173046_0.004849115050585828"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-15T08:36:12.990Z","0.0.1":"2022-07-15T08:36:13.185Z","modified":"2022-07-15T08:36:13.378Z"},"maintainers":[{"name":"fabienml","email":"fabienml.dev@gmail.com"},{"name":"davedbase","email":"dave.dibiase@gmail.com"}],"description":"Primitives for building accessible text field component.","homepage":"https://github.com/solidjs-community/solid-aria/tree/main/packages/textfield#readme","keywords":["solid","aria","headless","design","system","components"],"repository":{"type":"git","url":"git+https://github.com/solidjs-community/solid-aria.git"},"contributors":[],"author":{"name":"Fabien Marie-Louise","email":"fabienml.dev@gmail.com"},"bugs":{"url":"https://github.com/solidjs-community/solid-aria/issues"},"license":"MIT","readme":"<p>\n  <img width=\"100%\" src=\"https://assets.solidjs.com/banner?type=Aria&background=tiles&project=TextField\" alt=\"Solid Aria - TextField\">\n</p>\n\n# @solid-aria/textfield\n\n[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)\n[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)\n[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/textfield?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/textfield)\n[![version](https://img.shields.io/npm/v/@solid-aria/textfield?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/textfield)\n[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)\n\nTextFields are text inputs that allow users to input custom text entries with a keyboard.\n\n- [`createTextField`](#createtextfield) - Provides the behavior and accessibility implementation for a text field.\n\n## Installation\n\n```bash\nnpm install @solid-aria/textfield\n# or\nyarn add @solid-aria/textfield\n# or\npnpm add @solid-aria/textfield\n```\n\n## `createTextField`\n\n### Features\n\nText fields can be built with `<input>` or `<textarea>` and `<label>` elements, but you must manually ensure that they are semantically connected via ids for accessibility. `createTextField` helps automate this, and handle other accessibility features while allowing for custom styling.\n\n- Built with a native `<input>` or `<textarea>` element\n- Visual and ARIA labeling support\n- Change, clipboard, composition, selection, and input event support\n- Required and invalid states exposed to assistive technology via ARIA\n- Support for description and error message help text linked to the input via ARIA\n\n### How to use it\n\n```tsx\nimport { AriaTextFieldProps, createTextField } from \"@solid-aria/textfield\";\n\nfunction TextField(props: AriaTextFieldProps<\"input\">) {\n  let ref: HTMLInputElement | undefined;\n\n  const { labelProps, inputProps, descriptionProps, errorMessageProps } = createTextField(\n    props,\n    () => ref\n  );\n\n  return (\n    <div style={{ display: \"flex\", \"flex-direction\": \"column\", width: \"200px\" }}>\n      <label {...labelProps}>{props.label}</label>\n      <input {...inputProps} ref={ref} />\n      <Show when={props.description}>\n        <div {...descriptionProps} style={{ \"font-size\": \"12px\" }}>\n          {props.description}\n        </div>\n      </Show>\n      <Show when={props.errorMessage}>\n        <div {...errorMessageProps} style={{ color: \"red\", \"font-size\": \"12px\" }}>\n          {props.errorMessage}\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <>\n      <TextField label=\"Email\" />\n      <TextField\n        label=\"Email\"\n        description=\"Enter an email for us to contact you about your order.\"\n      />\n      <TextField label=\"Email\" errorMessage=\"Please enter a valid email address.\" />\n    </>\n  );\n}\n```\n\n### Internationalization\n\n#### RTL\n\nIn right-to-left languages, text fields should be mirrored. Ensure that your CSS accounts for this.\n\n## Changelog\n\nAll notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.\n","readmeFilename":"README.md"}