# Input Use the `` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helpText` for additional content support. ## Input Use Cases The `` element should be used in situations where users may: * needs to enter information * be filling out a form ## Getting Started #### NPM Installation ```shell $ npm i @aurodesignsystem/auro-formkit ``` ### TypeScript Module Resolution When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`: ```json { "compilerOptions": { "moduleResolution": "bundler" } } ``` This configuration enables proper module resolution for the component's TypeScript files. ## Install from CDN In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported. ```html ``` ## Formkit Development ### Filtering Running the `dev` command will open a `localhost` development server for all components in the monorepo at once. To only develop a single component, use the `--filter` flag: ```shell npx turbo dev --filter=@aurodesignsystem/auro-input ``` ## Custom Component Registration for Version Management There are two key parts to every Auro component: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML. When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you. However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts. You can do this by importing only the component class and using the `register(name)` method with a unique name: ```js // Import the class only import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class'; // Register with a custom name if desired AuroInput.register('custom-input'); ``` This will create a new custom element `` that behaves exactly like ``, allowing both to coexist on the same page without interfering with each other.

Label Help Text

See code ```html Label Help Text ```