input
Use a native input. AngularCSS styles data-entry input types directly, while
the browser and AngularTS own values, events, validation, required state,
disabled state, and form behavior.
<input placeholder="Jane Doe" /> <input placeholder="Disabled" disabled />
Use the native size attribute when a compact control should size to its
content. The control retains a max-width of 100%; browsers without
field-sizing use the requested number of visible characters.
<input value="Compact" size="7" />
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Input</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak ng-init="search=''; status=''">
<div class="stack">
<label for="docs-input-search">Search</label>
<input id="docs-input-search" placeholder="Search" ng-model="search" />
<output class="output"> Value: {{ search ? search : "empty" }} </output>
<label for="docs-input-compact">Content-sized</label>
<input id="docs-input-compact" value="Compact" size="7" />
<label for="docs-input-disabled">Disabled</label>
<input id="docs-input-disabled" placeholder="Disabled" disabled />
<label for="docs-input-invalid">Invalid</label>
<input
id="docs-input-invalid"
placeholder="Invalid"
aria-invalid="true"
/>
<label for="docs-input-file">File</label>
<input id="docs-input-file" type="file" />
</div>
</body>
</html>
Workflows
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Input Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="inputState={basic:'',apiKey:'',username:'',name:'',email:'',firstName:'',lastName:'',search:'',website:'',required:'',country:'us',formName:'',formEmail:'',phone:'',address:'',message:'Ready'}"
>
<main class="input-workflow-grid" aria-label="Input workflows">
<section data-example="input-basic" class="input-workflow">
<input
ng-model="inputState.basic"
placeholder="Enter text"
aria-label="Basic input"
/>
</section>
<section data-example="input-demo" class="input-workflow">
<div class="field">
<label for="input-demo-api-key">API Key</label>
<input
id="input-demo-api-key"
type="password"
ng-model="inputState.apiKey"
placeholder="sk-..."
/>
<p>Your API key is encrypted and stored securely.</p>
</div>
</section>
<section data-example="input-disabled" class="input-workflow">
<div class="field">
<label for="input-demo-disabled">Email</label>
<input
id="input-demo-disabled"
type="email"
placeholder="Email"
disabled
/>
<p>This field is currently disabled.</p>
</div>
</section>
<section data-example="input-invalid" class="input-workflow">
<div class="field">
<label for="input-invalid-workflow">Invalid Input</label>
<input
id="input-invalid-workflow"
placeholder="Error"
aria-invalid="true"
/>
<p>This field contains validation errors.</p>
</div>
</section>
<section data-example="input-required" class="input-workflow">
<div class="field">
<label for="input-required-workflow"
>Required Field <span class="input-required-mark">*</span></label
>
<input
id="input-required-workflow"
ng-model="inputState.required"
placeholder="This field is required"
required
/>
<p>This field must be filled out.</p>
</div>
</section>
<section data-example="input-file" class="input-workflow">
<div class="field">
<label for="input-picture">Picture</label>
<input id="input-picture" type="file" />
<p>Select a picture to upload.</p>
</div>
</section>
<section data-example="input-field" class="input-workflow">
<div class="field">
<label for="input-field-username">Username</label>
<input
id="input-field-username"
ng-model="inputState.username"
placeholder="Enter your username"
/>
<p>Choose a unique username for your account.</p>
</div>
</section>
<section data-example="input-badge" class="input-workflow">
<div class="field">
<label for="input-webhook"
>Webhook URL
<span variant="secondary" class="input-label-badge badge"
>Beta</span
></label
>
<input
id="input-webhook"
type="url"
placeholder="https://api.example.com/webhook"
/>
</div>
</section>
<section
data-example="input-grid"
class="input-workflow input-workflow-wide"
>
<div class="input-name-grid field-group">
<div class="field">
<label for="input-first-name">First Name</label
><input
id="input-first-name"
ng-model="inputState.firstName"
placeholder="Jordan"
/>
</div>
<div class="field">
<label for="input-last-name">Last Name</label
><input
id="input-last-name"
ng-model="inputState.lastName"
placeholder="Lee"
/>
</div>
</div>
</section>
<section
data-example="input-inline"
class="input-workflow input-workflow-wide"
>
<div orientation="horizontal" class="input-inline-demo field">
<input
type="search"
ng-model="inputState.search"
placeholder="Search..."
aria-label="Inline search"
/>
<button
type="button"
ng-click="inputState.message='Search '+inputState.search"
>
Search
</button>
</div>
</section>
<section data-example="input-button-group" class="input-workflow">
<div class="field">
<label for="input-button-group-workflow">Search</label>
<div role="group">
<input
id="input-button-group-workflow"
placeholder="Type to search..."
/><button
variant="outline"
type="button"
ng-click="inputState.message='Button group search'"
>
Search
</button>
</div>
</div>
</section>
<section data-example="input-input-group" class="input-workflow">
<div class="field">
<label for="input-group-url">Website URL</label>
<div class="input-group">
<input
id="input-group-url"
ng-model="inputState.website"
placeholder="example.com"
/>
<div>https://</div>
<div align="inline-end" aria-label="Website URL information">ⓘ</div>
</div>
</div>
</section>
<form
data-example="input-fieldgroup"
class="input-workflow input-workflow-form"
ng-submit="inputState.message='Submitted '+inputState.name"
>
<div class="field-group">
<div class="field">
<label for="fieldgroup-name">Name</label
><input
id="fieldgroup-name"
ng-model="inputState.name"
placeholder="Jordan Lee"
/>
</div>
<div class="field">
<label for="fieldgroup-email">Email</label
><input
id="fieldgroup-email"
type="email"
ng-model="inputState.email"
placeholder="name@example.com"
/>
<p>We'll send updates to this address.</p>
</div>
<div orientation="horizontal" class="input-form-actions field">
<button
type="reset"
variant="outline"
ng-click="inputState.name='';inputState.email=''"
>
Reset</button
><button type="submit">Submit</button>
</div>
</div>
</form>
<form
data-example="input-form"
class="input-workflow input-workflow-form input-workflow-form-large"
ng-submit="inputState.message='Contact submitted '+inputState.formName"
>
<div class="field-group">
<div class="field">
<label for="form-name">Name</label
><input
id="form-name"
ng-model="inputState.formName"
placeholder="Evil Rabbit"
required
/>
</div>
<div class="field">
<label for="form-email">Email</label
><input
id="form-email"
type="email"
ng-model="inputState.formEmail"
placeholder="john@example.com"
/>
<p>We'll never share your email with anyone.</p>
</div>
<div class="input-name-grid">
<div class="field">
<label for="form-phone">Phone</label
><input
id="form-phone"
type="tel"
ng-model="inputState.phone"
placeholder="+1 (555) 123-4567"
/>
</div>
<div class="field">
<label for="form-country">Country</label>
<select id="form-country" ng-model="inputState.country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
</select>
</div>
</div>
<div class="field">
<label for="form-address">Address</label
><input
id="form-address"
ng-model="inputState.address"
placeholder="123 Main St"
/>
</div>
<div orientation="horizontal" class="input-form-actions field">
<button
type="button"
variant="outline"
ng-click="inputState.message='Cancelled'"
>
Cancel</button
><button type="submit">Submit</button>
</div>
</div>
</form>
<section
data-example="input-rtl"
class="input-workflow"
dir="rtl"
lang="ar"
>
<div class="field">
<label for="input-rtl-api-key">مفتاح API</label
><input
id="input-rtl-api-key"
type="password"
dir="rtl"
placeholder="sk-..."
/>
<p>مفتاح API الخاص بك مشفر ومخزن بأمان.</p>
</div>
</section>
<output class="input-workflow-output"> {{ inputState.message }} </output>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native input behavior and AngularTS models.
Anatomy
Root styling selector
input:not([type="button"], [type="checkbox"], [type="color"], [type="hidden"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"])
Semantic structure
Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
aria-invalid | Authored | Validation state exposed to assistive technology and CSS. |
disabled | Authored | Disables native or component interaction. |
size | Authored | Native number of visible characters; also enables content sizing when supported. |
type | Authored | Native input kind, such as text, email, password, number, search, tel, or url. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Input is a native control styled directly by element and type. AngularTS and the browser own value, events, model synchronization, validation, disabled and required state, and form submission. AngularCSS registers no input directive.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Use a native input with a visible label. Preserve native type, name, autocomplete, required, disabled, and validation semantics; use AngularTS ng-model for application state and aria-invalid when application validation must be exposed explicitly.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.