# Input Styling (Floating Label Pattern)

All Arrow text-style inputs share one floating-label pattern: a **track** wrapper carries three data attributes that Arrow's CSS uses to animate the label and apply state styling.

## Components that use the floating label

| Component | Track class |
|-----------|-------------|
| `TextField` | `tdds-text-field__track` |
| `TextArea` | `tdds-text-area__track` |
| `Select` | `tdds-select__track` |
| `PasswordField` | `tdds-password-field__track` |
| `Search` | `tdds-search__track` |
| `CreditCardInput` | `tdds-credit-card-input__track` |

These components manage the pattern internally — when consuming them you only pass `id`, `label`, `name`, `value`, `onChange`. You do **not** wire up the track yourself.

You only touch the hook directly when authoring **new** Arrow-style inputs.

## Required props (every input)

| Prop | Why |
|------|-----|
| `id` | Associates `<label>` with `<input>` for screen readers and click-to-focus. |
| `label` | The visible floating label text. |
| `name` | Form submission key. Required for almost every input. |

Omitting any of these breaks accessibility and label floating.

## `useFloatingLabel` hook

```ts
function useFloatingLabel(options: {
  value: string | undefined;
  disabled?: boolean;
  readOnly?: boolean;
}): {
  isActive: boolean;       // input is focused
  isComplete: boolean;     // value is non-empty
  handlers: { onFocus: () => void; onBlur: () => void };
  trackDataAttributes: Record<string, string>;
}
```

`trackDataAttributes` produces:

| Attribute | When `"true"` |
|-----------|---------------|
| `data-active` | Input is focused (and not disabled / read-only) |
| `data-complete` | `value != null && value !== ''` |
| `data-disabled` | `disabled` is true |

Arrow's compiled CSS targets these attributes — they are non-negotiable for label motion and color states.

## Track HTML structure

```tsx
import { useFloatingLabel } from 'arrow-react-bootstrap';

const { handlers, trackDataAttributes } = useFloatingLabel({
  value,
  disabled,
});

<div className="tdds-text-field">
  <div className="tdds-text-field__track" {...trackDataAttributes}>
    <label className="tdds-text-field__label" htmlFor={id}>{label}</label>
    <input
      id={id}
      name={name}
      className="tdds-text-field__input"
      value={value ?? ''}
      onFocus={handlers.onFocus}
      onBlur={handlers.onBlur}
      onChange={onChange}
      disabled={disabled}
    />
  </div>
</div>
```

## Rules

- **Always spread `trackDataAttributes`** onto the `__track` element — never on the input itself.
- **Always wire both `onFocus` and `onBlur`** from `handlers` — `data-active` depends on it.
- **Never invent your own data attributes** in this slot. The CSS only targets `data-active`, `data-complete`, `data-disabled`.
- **For controlled inputs, `value` must be a string** (`''` for empty), so `isComplete` resolves correctly.
