Input
Displays a form input field or a component with a distinct look that indicates its input capabilities.
About
The Input component is a fundamental UI element used to collect user data. It supports various types, including text, email, password, and file. It's designed to be highly accessible and styleable using Tailwind CSS classes.
Installation
Run the following command to install the input component:
Usage
Default
A standard text input with a placeholder.
File
Input type for uploading files.
Select a file from your computer to upload.
Disabled
An input field in a disabled state.
This field is currently inactive.
With Label
An input field paired with a label and additional descriptive text.
We will never share your email with anyone else.
With Button
An input field combined with a button, useful for search or newsletter signups.
Join over 10,000 subscribers getting weekly updates.
Form Integration
Integrating with Reactive Forms and showing hints or error messages.
Custom Colors & Focus Rings
Easily customize the focus ring and border colors using Tailwind CSS utility classes.
API Reference
Helm API
The HlmInput directive provides the styling for the input element.
| Class | Selector | Description |
|---|---|---|
| HlmInput | [hlmInput] | Applies the spartan/ui styling to a native input element. |