Input

A family of form input components with consistent styling, built-in labels, hints, and error states.

Basic input

text · email · password

<ac-input label="Email address" type="email" name="email" placeholder="you@example.com"></ac-input>
<ac-input label="Password" type="password" name="password" placeholder="Min. 8 characters"></ac-input>

With hint & helper

<ac-input label="API Key" name="key" value="sk-••••••••••••" hint="Keep this secret. Never share publicly.">
<span slot="helper"><a href="#">Regenerate</a></span>
</ac-input>

Error state

<ac-input label="Username" name="username" value="taken_user" error="This username is already taken."></ac-input>

Disabled & readonly

<ac-input label="Account ID" name="id" value="acc_7f3a9c" disabled></ac-input>

Textarea

<ac-textarea label="Description" name="desc" placeholder="Tell us about your project..."></ac-textarea>

Select

<ac-select label="Industry" name="industry">
<option value="">Select an option</option>
<option value="logistics">Logistics</option>
<option value="agro">Agriculture</option>
<option value="energy">Energy</option>
</ac-select>

Attributes

Attribute	Description
`label`	Label text above the field
`type`	Input type (`text`, `email`, `password`, etc.)
`name`	Field name for form submission
`value`	Initial value
`placeholder`	Placeholder text
`required`	Marks field as required
`disabled`	Disables the field
`error`	Error message — also sets `aria-invalid` and red border
`hint`	Hint text below the field
`size`	`sm \| md \| lg`
`id`	Forwarded to the inner `<input>`

CSS native usage

<input type="text" class="ac-input__field" placeholder="Styled input">
<textarea class="ac-textarea__field" rows="3"></textarea>
<select class="ac-select__field">
  <option>Option</option>
</select>