# Input

Text input for forms and user data entry with shadcn-style visual states and Angular-friendly composition.

The input itself stays a native `<input>` element. When the current shadcn docs mention `Field`, `FieldLabel`, or
`FieldDescription`, the local Angular mapping is the existing form primitives rather than a separate runtime `Form`
component.

## Import

For the simplest standalone field:

```ts
import { InputComponent } from '@edsis/component/input';
import { LabelComponent } from '@edsis/component/label';
```

For the richer field composition used throughout the shadcn Input docs:

```ts
import {
  FormControlDirective,
  FormDescriptionComponent,
  FormFieldComponent,
  FormLabelComponent,
  FormMessageComponent,
} from '@edsis/component/form';
import { InputComponent } from '@edsis/component/input';
```

## Usage

### Standalone input

```html
<label Label for="email">Email</label>
<input id="email" Input type="email" placeholder="you@example.com" />
```

### Field mapping

Use the local form primitives when you need the label, helper text, and invalid-state wiring shown in the upstream
shadcn examples:

```html
<FormField>
  <FormLabel>Email</FormLabel>
  <input Input FormControl type="email" placeholder="you@example.com" />
  <FormDescription>We'll only use this address for account updates.</FormDescription>
  <FormMessage>Enter a valid email address.</FormMessage>
</FormField>
```

## Common Patterns

### Reactive forms

`Input` keeps Angular's standard `DefaultValueAccessor`, so reactive forms and `formControlName` work without a
wrapper component.

```ts
readonly profileForm = new FormGroup({
  email: new FormControl('', {
    nonNullable: true,
    validators: [Validators.required, Validators.email],
  }),
});
```

```html
<FormField>
  <FormLabel>Email</FormLabel>
  <input Input FormControl formControlName="email" type="email" placeholder="john@example.com" />
  <FormDescription>We'll never share your email with anyone.</FormDescription>
  <FormMessage>Enter a valid email address.</FormMessage>
</FormField>
```

### Invalid state without Angular forms

If the field participates in a validation flow outside Angular forms, forward `aria-invalid="true"` manually.

```html
<input Input aria-invalid="true" placeholder="Error" />
```

### File input

The same directive styles file inputs while preserving the browser-native file picker.

```html
<FormField>
  <FormLabel>Picture</FormLabel>
  <input Input FormControl type="file" />
  <FormDescription>Select a picture to upload.</FormDescription>
</FormField>
```

### Inline actions

For search bars or quick actions, compose the input with `Button` instead of inventing a synthetic group API.

```html
<div class="flex max-w-md items-center gap-2">
  <input Input type="search" placeholder="Search..." class="flex-1" />
  <button Button type="button">Search</button>
</div>
```

## API Reference

### `InputComponent`

| Input   | Type     | Default |
| ------- | -------- | ------- |
| `class` | `string` | `''`    |

All native `<input>` attributes such as `type`, `placeholder`, `required`, `disabled`, `autocomplete`, and `value`
continue to work as usual.

### Field Mapping

- `Field` maps to `FormField`.
- `FieldLabel` maps to `FormLabel`.
- `FieldDescription` maps to `FormDescription`.
- Invalid and helper-text wiring come from `[FormControl]` plus `FormMessage`.

## Styling and Theming

Theme tokens used by the input styles include `--border`, `--input`, `--foreground`, `--muted-foreground`, `--ring`,
and `--destructive`.

When `aria-invalid="true"` is present, the border and focus ring switch to the destructive treatment. Pass `class`
for layout utilities such as width, flex growth, or spacing around the native control.

## Accessibility

- Pair every input with a visible label or another accessible name source.
- Use `FormControl` inside `FormField` when the control should auto-wire `id`, `aria-describedby`, and invalid
  state.
- Keep helper text and validation messages adjacent to the field so screen readers announce the full context.
- Do not remove the focus ring; the component keeps a visible keyboard-only focus treatment.

## Keyboard Interactions

- The component preserves the browser-native keyboard behavior of the underlying input element.
- File, search, email, password, and text variants continue to use the interactions defined by their native type.
- Any adjacent action button, such as a search trigger, remains a separate Tab stop.

## Angular Notes

- `Input` is an attribute selector on the native `<input>` element.
- It works with both `ngModel` and reactive forms because Angular still sees the underlying native control.
- `FormControl` is optional; use it when the field participates in the local form-primitive composition.

## Source Parity

This Angular implementation follows the current shadcn Input information architecture while translating `Field` to the
local form primitives. Upstream `Input Group` and `Button Group` examples are intentionally left to their own planned
components instead of being faked inside the input API.