# Input ```mdx ``` ## Usage Import Tailwind and one full Basecoat style bundle. ```css @import "tailwindcss"; @import "basecoat-css/vega.css"; ``` Or import only the base CSS, Input component CSS, and one style pack. ```css @import "tailwindcss"; @import "basecoat-css/base.css"; @import "basecoat-css/components/input.css"; @import "basecoat-css/styles/vega.css"; ``` Using CDN or bundler imports? See the [Installation page](/installation). Add `class="input"` to supported `` elements. Inputs inside a `class="field"` container also receive the same styling automatically for common text-like input types. Use native HTML attributes for behavior: `disabled` for disabled inputs, `required` for required fields, and `aria-invalid="true"` for invalid state styling. ```html ``` ## Examples ### Basic ```mdx ``` ### Field Use `field` with a label and description to create an accessible field. ```mdx

Enter your email address.

``` ### Field group ```mdx

First name

Last name

``` ### Disabled ```mdx ``` ### Invalid ```mdx ``` ### File ```mdx ``` ### Inline ```mdx

``` ### Grid ```mdx

``` ### Required ```mdx

Username *

``` ### Badge ```mdx

Email Recommended

``` ### Input group Use the [Input Group](/components/input-group/) patterns to add icons, text, or buttons inside an input. ```mdx

``` ### Button group Use [Button Group](/components/button-group/) when an input should be grouped with adjacent buttons. ```mdx

``` ### Form ```mdx ``` ### RTL Inputs support right-to-left layouts through native browser direction handling. Add `dir="rtl"` to the input, field, or an ancestor. ```mdx

مفتاح API

مفتاح API الخاص بك مشفر ومخزن بأمان.

```