# 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.
## auro-input use cases
The `` element should be used in situations where users may:
* needs to enter information
* be filling out a form
## Default component
The default component supports the basic input `type="text"` structure. The `(optional)` label is provided to instruct the user that their input is not required. Use the `bordered` attribute for a bordered ``.
See code
```html
```
## Placeholder
Use the `placeholder` attribute to add a custom placeholder message within the element.
Full name
Full name
Please enter your full name.
See code
```html
Full name
Full name
Please enter your full name.
```
## Disabled
Use the `disabled` attribute to prevent the user from interacting with the input.
Departure date
Arrival date
See code
```html
Departure date
Arrival date
```
## Active Label
Example use cases for auro-input support the `activeLabel` attribute. If set, the label will stay fixed in the active position.
Address
Please enter your home address.
Address
Please enter your home address.
See code
```html
Address
Please enter your home address.
Address
Please enter your home address.
```
## Value
Use the `value` attribute to preset the value of the element.
Name
Please enter your full name.
See code
```html
Name
Please enter your full name.
```
## Pattern
Use the `pattern` attribute to set custom input validation. This example also uses the `spellcheck` attribute set to `false` which in turn sets `autocorrect` to `off` and `autocapitalize` to `none`. Additionally the `maxlength` attribute sets the maximum length of characters that can be entered.
The `` component supports setting a custom validity message specific to the pattern validation by using the `setCustomValidityBadInput` attribute.
Username
Please enter a username.
Username
Please enter a username.
See code
```html
Username
Please enter a username.
Username
Please enter a username.
```
## Recommended Use and Version Control
There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-input` custom element is defined automatically.
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroInput.register(name)` method and pass in a unique name.
```js
import { AuroInput } from './src/auro-input.js';
AuroInput.register('custom-input');
```
This will create a new custom element that you can use in your HTML that will function identically to the `` element.
See code
```html
```